'use client'

import type { LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

interface EmptyStateProps {
  icon: LucideIcon
  title: string
  description?: string
  action?: {
    label: string
    onClick: () => void
  }
  compact?: boolean
  className?: string
}

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
  compact = false,
  className,
}: EmptyStateProps) {
  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center text-center',
        compact ? 'py-4 px-3 gap-2' : 'py-8 px-4 gap-3',
        className
      )}
    >
      <div
        className={cn(
          'rounded-panel bg-surface-2 flex items-center justify-center',
          compact ? 'w-8 h-8' : 'w-12 h-12'
        )}
      >
        <Icon
          size={compact ? 16 : 24}
          className="text-muted"
          strokeWidth={1.5}
        />
      </div>
      <div className={cn('flex flex-col items-center', compact ? 'gap-0.5' : 'gap-1')}>
        <p
          className={cn(
            'text-primary font-medium',
            compact ? 'text-[12px]' : 'text-[13px]'
          )}
        >
          {title}
        </p>
        {description && (
          <p
            className={cn(
              'text-secondary leading-relaxed',
              compact ? 'text-[11px]' : 'text-[12px]'
            )}
          >
            {description}
          </p>
        )}
      </div>
      {action && (
        <button
          onClick={action.onClick}
          className={cn(
            'mt-1 inline-flex items-center gap-1.5 rounded-control bg-brand-primary text-on-primary font-medium',
            'hover:bg-brand-primary-hover active:bg-brand-primary-active active:scale-[0.97]',
            'transition-colors focus:outline-none focus-visible:shadow-focus-ring',
            compact ? 'px-2.5 h-7 text-[11px]' : 'px-3 h-8 text-[12px]'
          )}
        >
          {action.label}
        </button>
      )}
    </div>
  )
}