'use client';

import React from 'react';
import { AlertCircle, Inbox, RefreshCw } from 'lucide-react';
import { Button } from './Button';

export function LoadingBlock({ label = 'Loading…' }: { label?: string }) {
  return (
    <div className="d11-card overflow-hidden px-4 py-10 text-center" aria-busy="true">
      <div className="mx-auto mb-3 h-10 w-10 rounded-full soft-shimmer" />
      <div className="mx-auto mb-2 h-3 w-36 rounded-full soft-shimmer" />
      <p className="text-sm font-medium text-d11-muted">{label}</p>
    </div>
  );
}

export function EmptyBlock({
  title,
  hint,
  action,
}: {
  title: string;
  hint?: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="d11-card border-dashed px-5 py-12 text-center">
      <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-gray-50 ring-1 ring-d11-line">
        <Inbox className="h-6 w-6 text-gray-300" aria-hidden />
      </div>
      <p className="font-display text-sm font-extrabold text-gray-800">{title}</p>
      {hint && <p className="mt-1.5 text-xs leading-relaxed text-d11-muted">{hint}</p>}
      {action && <div className="mt-4 flex justify-center">{action}</div>}
    </div>
  );
}

export function ErrorBlock({ message, onRetry }: { message: string; onRetry?: () => void }) {
  return (
    <div className="rounded-2xl border border-red-200 bg-d11-soft px-4 py-6 text-center" role="alert">
      <AlertCircle className="mx-auto mb-2 h-5 w-5 text-d11-red" aria-hidden />
      <p className="text-sm font-medium text-red-800">{message}</p>
      {onRetry && (
        <Button variant="secondary" size="sm" className="mt-3 min-h-[44px] gap-1.5 rounded-xl" onClick={onRetry}>
          <RefreshCw className="h-3.5 w-3.5" />
          Retry
        </Button>
      )}
    </div>
  );
}