"use client";

import { cn } from "@/utils/cn";
import { AlertCircle } from "lucide-react";
import { useTranslation } from "@/i18n";

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

export function ErrorState({
  message,
  className,
  onRetry,
}: ErrorStateProps) {
  const { t } = useTranslation();
  return (
    <div className={cn("flex flex-col items-center justify-center py-12 gap-3", className)}>
      <AlertCircle className="w-10 h-10 text-red-500" />
      <span className="text-red-500 text-sm text-center">{message ?? t("state_error")}</span>
      {onRetry && (
        <button
          onClick={onRetry}
          className="text-sm font-medium transition-colors"
          style={{ color: "var(--accent)" }}
        >
          {t("state_tryAgain")}
        </button>
      )}
    </div>
  );
}