// @design-system: feedback/ErrorState
/**
 * ErrorState - error / failure state with danger tone.
 *
 * @example
 * <ErrorState
 *   title={t('title')}
 *   description={t('description')}
 *   action={<Button onClick={retry}>{t('retry')}</Button>}
 * />
 */

import { type ReactNode } from 'react';
import { cn } from '@/lib/cn';

export interface ErrorStateProps {
  icon?: ReactNode;
  title: string;
  description?: string;
  action?: ReactNode;
  className?: string;
}

function DefaultErrorIcon() {
  return (
    <svg
      aria-hidden="true"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <line x1="12" y1="8" x2="12" y2="12" />
      <line x1="12" y1="16" x2="12.01" y2="16" />
    </svg>
  );
}

export function ErrorState({ icon, title, description, action, className }: ErrorStateProps) {
  return (
    <div
      role="alert"
      className={cn(
        'flex flex-col items-center justify-center text-center',
        'gap-3',
        'px-6 py-10',
        className,
      )}
    >
      <span
        className="bg-danger-50 text-danger-600 flex size-[var(--spacing-12)] items-center justify-center rounded-full"
        aria-hidden="true"
      >
        {icon ?? <DefaultErrorIcon />}
      </span>
      <h3 className="text-danger-700 text-lg font-bold leading-[var(--line-height-tight)]">
        {title}
      </h3>
      {description && (
        <p className="text-text-secondary max-w-xs text-sm leading-[var(--line-height-normal)]">
          {description}
        </p>
      )}
      {action && <div className="mt-2">{action}</div>}
    </div>
  );
}