import { FileText, Image, File } from "lucide-react";
import type { Attachment } from "~/lib/api";

export default function AttachmentItem({ attachment }: { attachment: Attachment }) {
  return (
    <a
      href={"https://bjcolle.fr/" + attachment.path}
      target="_blank"
      className="flex items-center gap-2 p-3 border rounded-md hover:bg-muted transition-colors cursor-pointer"
    >
      {getIcon(attachment.path)}
      <span className="font-medium truncate">
        {attachment.name}
      </span>
    </a>
  );
}

const getType = (attachment: string) => {
  const ext = attachment.split(".").pop();
  if (ext === "pdf") {
    return "pdf";
  } else if (["jpg", "jpeg", "png", "gif"].includes(ext!)) {
    return "image";
  } else {
    console.error(`Unknown attachment type: ${ext}`);
    return "other";
  }
};

const getIcon = (attachment: string) => {
  switch (getType(attachment)) {
    case "pdf":
      return <FileText className="h-5 w-5 text-red-500" />;
    case "image":
      return <Image className="h-5 w-5 text-blue-500" />;
    // case "document":
    //     return <FileText className="h-5 w-5 text-blue-500" />
    // case "spreadsheet":
    //     return <FileText className="h-5 w-5 text-green-500" />
    // case "code":
    //     return <FileText className="h-5 w-5 text-purple-500" />
    default:
      return <File className="h-5 w-5 text-gray-500" />;
  }
};