import { IconSpeakerphone, IconSearch, IconActivity, IconFileText } from '@tabler/icons-react'
import type { Icon } from '@tabler/icons-react'

interface Props {
  title?: string
  message?: string
  actionLabel?: string
  onAction?: () => void
  icon?: Icon
}

export default function EmptyState({
  title = 'Nothing here yet',
  message = 'Be the first to share your thoughts and ideas',
  actionLabel = 'Share feedback',
  onAction,
  icon: CustomIcon,
}: Props) {
  const Icon = CustomIcon || IconSpeakerphone

  return (
    <div className="flex flex-col items-center justify-center py-20 px-4 fade-in">
      <div
        className="w-24 h-24 rounded-full flex items-center justify-center mb-8"
        style={{
          background: 'var(--accent-subtle)',
          boxShadow: 'var(--shadow-glow)',
        }}
      >
        <Icon size={44} stroke={1.5} style={{ color: 'var(--accent)' }} />
      </div>

      <h2
        className="font-bold mb-3"
        style={{
          fontFamily: 'var(--font-heading)',
          color: 'var(--text)',
          fontSize: 'var(--text-xl)',
        }}
      >
        {title}
      </h2>
      <p
        className="mb-8 text-center"
        style={{
          color: 'var(--text-secondary)',
          fontSize: 'var(--text-base)',
          maxWidth: 360,
          lineHeight: 1.6,
        }}
      >
        {message}
      </p>
      {onAction && (
        <button onClick={onAction} className="btn btn-primary">
          {actionLabel}
        </button>
      )}
    </div>
  )
}