import { useLanguage } from '../i18n/LanguageContext'

export default function EmptyState({
  icon: Icon,
  title,
  description,
  actionLabel,
  onAction,
  secondaryActionLabel,
  onSecondaryAction,
  compact = false
}) {
  const { t } = useLanguage()

  if (compact) {
    return (
      <div className="py-8 text-center">
        {Icon && <Icon className="w-8 h-8 text-text-tertiary mx-auto mb-2" />}
        <p className="text-sm text-text-secondary">{title}</p>
        {description && <p className="text-xs text-text-tertiary mt-1">{description}</p>}
        {actionLabel && (
          <button
            onClick={onAction}
            className="mt-3 text-sm text-brand-primary hover:text-brand-primary-light font-medium transition-colors"
          >
            {actionLabel}
          </button>
        )}
      </div>
    )
  }

  return (
    <div className="py-16 text-center">
      {Icon && (
        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-surface-tertiary mb-4">
          <Icon className="w-8 h-8 text-text-tertiary" />
        </div>
      )}
      <h3 className="text-lg font-semibold text-text-primary mb-2">{title}</h3>
      {description && <p className="text-sm text-text-secondary max-w-md mx-auto mb-6">{description}</p>}
      
      <div className="flex items-center justify-center gap-3">
        {actionLabel && (
          <button
            onClick={onAction}
            className="px-5 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light transition-colors"
          >
            {actionLabel}
          </button>
        )}
        {secondaryActionLabel && (
          <button
            onClick={onSecondaryAction}
            className="px-5 py-2.5 bg-surface border border-border text-text-primary rounded-lg text-sm font-medium hover:bg-surface-secondary transition-colors"
          >
            {secondaryActionLabel}
          </button>
        )}
      </div>
    </div>
  )
}