"use client";

import { useWarnings } from "@/hooks/use-warnings";
import { WarningCard } from "@/components/warnings/warning-card";
import { PageLoadingSkeleton } from "@/components/states/loading-skeleton";
import { EmptyState } from "@/components/states/empty-state";
import { ErrorState } from "@/components/states/error-state";
import { useI18n } from "@/lib/i18n";

export function WarningsPanel() {
  const { t } = useI18n();
  const { data: warnings, isPending, isError, refetch } = useWarnings();
  if (isPending) return <PageLoadingSkeleton />;
  if (isError) return <ErrorState onRetry={() => refetch()} description={t("warnings.error")} />;
  if (!warnings?.length) return <EmptyState title={t("warnings.emptyTitle")} description={t("warnings.emptyDescription")} />;
  return <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{warnings.map((warning, index) => <WarningCard key={warning.id} warning={warning} index={index} />)}</div>;
}