import { Document } from "@/src/types/admin/types";
import Link from "next/link";

interface DocumentCardProps {
  document: Document;
  index: number;
}

export default function DocumentCard({ document, index }: DocumentCardProps) {
  
  return (
    <div className="overflow-hidden border border-gray-200 rounded-xl bg-white">
      <table className="w-full text-sm">
        <tbody>
          <tr>
            <td className="bg-gray-50 px-4 py-3 font-medium text-gray-700 w-2/3">
              <div className="flex flex-col gap-1">
                <div className="flex items-center gap-2">
                  <span>{document.label}</span>
                  {document.required ? (
                    <span className="text-[10px] px-2 py-0.5 rounded-lg bg-red-50 text-red-400 font-semibold">
                      Required
                    </span>
                  ) : (
                    <span className="text-[10px] px-2 py-0.5 rounded-lg bg-gray-50 text-gray-500 font-semibold">
                      Optional
                    </span>
                  )}
                </div>

                {document.uploadDisabled && (
                  <span className="text-[11px] text-gray-400">
                    Provided by employer
                  </span>
                )}

                {document.requiresTwoUnit && (
                  <span className="text-[11px] text-gray-400">
                    Required only for 2-unit homes
                  </span>
                )}
              </div>
            </td>

            <td className="px-4 py-3 text-right">
              <Link
                target="_blank"
                href={document.fileUrl || ""}
                className="text-xs font-semibold bg-teal-600 text-white hover:bg-teal-700 px-4 py-1.5 rounded-lg shadow-sm transition"
              >
                View
              </Link>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}