import { MdImage, MdDescription } from "react-icons/md";

/**
 * Get the appropriate icon for a file based on its filename or MIME type
 * @param filenameOrType - Either filename (string) or MIME type (string)
 * @param size - Icon size (default: "h-8 w-8")
 * @param className - Additional CSS classes
 * @returns JSX.Element - The appropriate icon component
 */
export const getFileIcon = (
  filenameOrType: string,
  size: string = "h-8 w-8",
  className: string = ""
) => {
  const input = filenameOrType.toLowerCase();
  const baseClasses = `${size} ${className}`.trim();

  // Check if it's a MIME type or filename
  const isImage =
    input.startsWith("image/") || /\.(jpe?g|png|gif|webp)$/i.test(input);
  const isPdf = input === "application/pdf" || input.endsWith(".pdf");
  const isWord =
    input.includes("word") ||
    input.includes("document") ||
    input.includes("doc");
  const isExcel =
    input.includes("excel") ||
    input.includes("spreadsheet") ||
    input.includes("xls");

  if (isImage) {
    return <MdImage className={`${baseClasses} text-blue-500`} />;
  } else if (isPdf) {
    return <MdDescription className={`${baseClasses} text-red-500`} />;
  } else if (isWord) {
    return <MdDescription className={`${baseClasses} text-blue-600`} />;
  } else if (isExcel) {
    return <MdDescription className={`${baseClasses} text-green-600`} />;
  } else {
    // Default icon for unknown types
    return <MdDescription className={`${baseClasses} text-gray-500`} />;
  }
};

/**
 * Get file icon for upload list (smaller size)
 */
export const getUploadFileIcon = (type: string) => {
  return getFileIcon(type, "h-8 w-8");
};

/**
 * Get file icon for document lists (larger size)
 */
export const getDocumentFileIcon = (filename: string) => {
  return getFileIcon(filename, "h-10 w-10", "mr-4 flex-shrink-0");
};