"use client";

import { FileText } from "lucide-react";
import { Badge, Card, CardContent, CardHeader, CardTitle } from "@/components/ui";
import { useLocale } from "@/lib/i18n";
import { ti } from "@/lib/i18n/dashboard-labels";
import type { IdentityViewModel } from "@/lib/farmer-dashboard";
import { cn } from "@/lib/utils";

interface LandEvidenceListProps {
  items: NonNullable<IdentityViewModel["landEvidence"]>;
  className?: string;
}

export default function LandEvidenceList({ items, className }: LandEvidenceListProps) {
  const { locale } = useLocale();

  return (
    <Card className={cn("h-full", className)} data-testid="identity-land-evidence-card">
      <CardHeader className="flex-row items-center gap-2">
        <span className="flex size-9 items-center justify-center rounded-lg bg-brand-green/10 text-brand-green">
          <FileText className="size-4" aria-hidden="true" />
        </span>
        <CardTitle className="text-base">{ti("landEvidenceTitle", locale)}</CardTitle>
      </CardHeader>

      <CardContent>
        <ul className="space-y-3">
          {items.map((doc) => (
            <li
              key={doc.name}
              className="flex min-h-11 items-center gap-3 rounded-lg bg-surface-elevated px-3 py-2.5"
              data-testid={`identity-land-doc-${doc.name.replace(/\s+/g, "-").toLowerCase()}`}
            >
              <span
                className={cn(
                  "flex size-9 shrink-0 items-center justify-center rounded-lg",
                  doc.verified ? "bg-success-bg text-success-green" : "bg-red-50 text-red-600",
                )}
              >
                <FileText className="size-4" aria-hidden="true" />
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate font-inter text-sm font-medium text-ink">{doc.name}</p>
                <p className="font-inter text-xs uppercase text-muted">{doc.type}</p>
              </div>
              {doc.verified ? (
                <Badge variant="success" icon={false} className="shrink-0">
                  {ti("verified", locale)}
                </Badge>
              ) : (
                <Badge variant="warning" icon={false} className="shrink-0">
                  {ti("pending", locale)}
                </Badge>
              )}
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );
}