import { FileText, Image, File } from "lucide-react";

export default function AttachmentItem({ attachment }: { attachment: string }) {
  return (
    <a
      // TODO: BAD: hardcoded URL, should be dynamic (environment variable or config)
      href={"https://bjcolle.fr/" + attachment}
      target="_blank"
      className="flex items-center gap-2 p-3 border rounded-md hover:bg-muted transition-colors cursor-pointer"
    >
      {getIcon(attachment)}
      <span className="font-medium truncate">
        {getName(attachment) || "Sans Nom"}
      </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" />;
  }
};

const getName = (attachment: string) => {
  const parts = attachment.replace("pj_doc", "").split("_");
  const nameParts = parts.slice(2); // remove the first two parts
  return nameParts.join("_");
};