"use client";

import { CheckCircle2, Clock, FileText } from "lucide-react";
import type { FinanceViewModel } from "@/lib/farmer-dashboard";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { tf } from "@/lib/i18n/dashboard-labels";
import type { AppLocale } from "@/lib/i18n/config";
import { cn } from "@/lib/utils";

export interface DocumentChecklistProps {
  documents: NonNullable<FinanceViewModel["documents"]>;
  locale: AppLocale;
  className?: string;
}

export function DocumentChecklist({ documents, locale, className }: DocumentChecklistProps) {
  return (
    <Card padding="md" className={className}>
      <CardHeader className="mb-3">
        <CardTitle className="flex items-center gap-2 text-base">
          <FileText className="size-4 text-brand-green" aria-hidden="true" />
          {tf("documents", locale)}
        </CardTitle>
      </CardHeader>
      <ul className="space-y-2" role="list">
        {documents.map((doc) => {
          const verified = doc.status === "verified";

          return (
            <li
              key={doc.name}
              className={cn(
                "flex items-center gap-3 rounded-lg px-2 py-2",
                verified ? "text-ink" : "text-muted",
              )}
            >
              {verified ? (
                <CheckCircle2
                  className="size-5 shrink-0 text-success-green"
                  aria-hidden="true"
                />
              ) : (
                <Clock className="size-5 shrink-0 text-muted" aria-hidden="true" />
              )}
              <span className="font-inter text-sm flex-1">{doc.name}</span>
              <span className="sr-only">
                {verified ? tf("verified", locale) : tf("pending", locale)}
              </span>
            </li>
          );
        })}
      </ul>
    </Card>
  );
}