import { AlertTriangle, RefreshCcw } from "lucide-react";
import { Button } from "./button/button";

type ErrorStateProps = {
  message?: string;
  onRetry?: () => void;
  className?: string;
};

export function ErrorState({ message, onRetry, className }: ErrorStateProps) {
  return (
    <div
      className={`mt-6 rounded-xl border border-red-200 bg-red-50 p-4 text-red-700 ${className}`}
    >
      <div className="flex items-center gap-2">
        <AlertTriangle className="h-5 w-5" />
        <p className="font-medium">Gagal memuat data.</p>
      </div>

      <p className="mt-1 text-sm opacity-80">{message}</p>

      {onRetry && (
        <Button
          onClick={onRetry}
          size="sm"
          className="mt-3 inline-flex items-center gap-2"
        >
          <RefreshCcw className="h-4 w-4" /> Coba lagi
        </Button>
      )}
    </div>
  );
}
