import * as React from 'react';
import { AlertCircle } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from './button';

export interface ErrorStateProps {
  heading?: string;
  body: string;
  onRetry?: () => void;
  retryLabel?: string;
  inline?: boolean;
  className?: string;
}

export function ErrorState({
  heading,
  body,
  onRetry,
  retryLabel = 'Try again',
  inline = false,
  className,
}: ErrorStateProps) {
  if (inline) {
    return (
      <div
        role="alert"
        className={cn(
          'flex items-start gap-2.5 rounded-lg border border-danger/20 bg-[#fee2e2] px-4 py-3 text-sm text-[#b91c1c]',
          className,
        )}
      >
        <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" aria-hidden />
        <p>{body}</p>
      </div>
    );
  }

  return (
    <div className={cn('flex flex-col items-center text-center py-12 px-4', className)}>
      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[#fee2e2] text-danger">
        <AlertCircle className="h-6 w-6" aria-hidden />
      </div>
      {heading ? (
        <p className="font-heading text-base font-semibold text-neutral-900">{heading}</p>
      ) : null}
      <p className={cn('max-w-xs text-sm text-neutral-500', heading ? 'mt-1.5' : '')}>{body}</p>
      {onRetry ? (
        <div className="mt-5">
          <Button variant="secondary" size="sm" onClick={onRetry}>
            {retryLabel}
          </Button>
        </div>
      ) : null}
    </div>
  );
}