import React from 'react';
import { Card } from '../ui/Card.tsx';
import { Skeleton } from '../ui/Skeleton.tsx';
import { EmptyState } from '../ui/EmptyState.tsx';
import { ErrorState } from '../ui/ErrorState.tsx';
import { AlertTriangle, CheckCircle } from 'lucide-react';

interface StatePanelProps {
  type: 'loading' | 'empty' | 'error' | 'success' | 'retry';
  onRetry?: () => void;
  title?: string;
  description?: string;
}

export const StatePanel: React.FC<StatePanelProps> = ({ type, onRetry, title, description }) => {
  switch (type) {
    case 'loading':
      return (
        <div className="space-y-4">
          <Skeleton className="h-8 w-3/4" />
          <Skeleton className="h-4 w-1/2" />
          <Skeleton className="h-24 w-full" />
        </div>
      );
    case 'empty':
      return <EmptyState title={title} description={description} />;
    case 'error':
      return <ErrorState message={description} onRetry={onRetry} />;
    case 'success':
      return (
        <Card className="p-6 text-center">
          <CheckCircle className="w-12 h-12 text-[var(--success)] mx-auto mb-3" />
          <h3 className="text-xl font-display font-semibold text-[var(--ink)]">{title || 'Operation successful'}</h3>
          <p className="text-[var(--ink-muted)]">{description || 'All systems are operational.'}</p>
        </Card>
      );
    case 'retry':
      return (
        <div className="text-center py-8">
          <AlertTriangle className="w-12 h-12 text-[var(--warning)] mx-auto mb-3" />
          <p className="text-[var(--ink-muted)] mb-4">{description || 'Something went wrong. You can retry.'}</p>
          {onRetry && (
            <button
              onClick={onRetry}
              className="px-6 py-2 bg-[var(--brand-500)] text-[var(--ink-inverse)] rounded-[var(--r)] hover:bg-[var(--brand-600)] transition"
            >
              Retry
            </button>
          )}
        </div>
      );
    default:
      return null;
  }
};