export type FormatFileProps =
  | "doc" | "pdf" | "md" | "mdx" | "csv" | "xls" | "xlsx" | "txt"
  | "ppt" | "pptx" | "zip" | "rar" | "tar" | "gz" | "code" | "html"
  | "js" | "jsx" | "tsx" | "css" | "json" | "img" | "png" | "jpg" | "jpeg" | "video";

type FileCardProps = { formatFile: FormatFileProps };

const META: Record<FormatFileProps, { abbr: string; label: string }> = {
  pdf:   { abbr: "PDF",  label: "PDF"        },
  doc:   { abbr: "DOC",  label: "Document"   },
  txt:   { abbr: "TXT",  label: "Text"       },
  md:    { abbr: "MD",   label: "Markdown"   },
  mdx:   { abbr: "MDX",  label: "MDX"        },
  // "Spreadsheet" is 11 characters in a 34px column — it never fit. The abbr
  // below it already carries the specific format.
  csv:   { abbr: "CSV",  label: "Sheet"      },
  xls:   { abbr: "XLS",  label: "Sheet"      },
  xlsx:  { abbr: "XLS",  label: "Sheet"      },
  ppt:   { abbr: "PPT",  label: "Slides"     },
  pptx:  { abbr: "PPT",  label: "Slides"     },
  zip:   { abbr: "ZIP",  label: "Archive"    },
  rar:   { abbr: "RAR",  label: "Archive"    },
  tar:   { abbr: "TAR",  label: "Archive"    },
  gz:    { abbr: "GZ",   label: "Archive"    },
  code:  { abbr: "FIG",  label: "Design"     },
  html:  { abbr: "HTML", label: "HTML"       },
  js:    { abbr: "JS",   label: "Script"     },
  jsx:   { abbr: "JSX",  label: "React"      },
  tsx:   { abbr: "TSX",  label: "React"      },
  css:   { abbr: "CSS",  label: "Styles"     },
  json:  { abbr: "JSON", label: "Data"       },
  img:   { abbr: "IMG",  label: "Image"      },
  png:   { abbr: "PNG",  label: "Image"      },
  jpg:   { abbr: "JPG",  label: "Image"      },
  jpeg:  { abbr: "JPG",  label: "Image"      },
  video: { abbr: "VID",  label: "Video"      },
};

export const FileCard = ({ formatFile }: FileCardProps) => {
  const { abbr, label } = META[formatFile] ?? { abbr: "FILE", label: "File" };

  // The card is 56px wide and the label column gets ~34px of it, which the
  // longer labels ("Document", "Spreadsheet", "Markdown") overflow at any
  // readable size. They wrap to two lines instead — tracking is dropped for
  // the long ones so the wrap lands between words rather than mid-word.
  const longLabel = label.length > 6;

  // "HTML" and "JSON" are as wide as the card at 20px. Step the size down for
  // four-character abbreviations rather than letting them spill.
  const abbrSize = abbr.length >= 4 ? "0.95rem" : "1.25rem";

  return (
    <div
      aria-hidden
      className="w-14 h-[4.5rem] border border-black/[0.10] dark:border-white/[0.10] flex flex-col justify-between p-1.5 overflow-hidden"
      style={{ borderRadius: "var(--radius-sm)" }}
    >
      {/* Micro-label + orange dot */}
      <div className="flex items-start justify-between gap-1">
        <span
          // break-words matters: the long labels are single words, so without
          // it they can't wrap at all and just spill past the border.
          className={`min-w-0 flex-1 break-words font-bold uppercase text-black/40 dark:text-white/30 ${
            longLabel
              ? "text-[6px] tracking-normal leading-[1.15]"
              : "text-[6.5px] tracking-[0.12em] leading-tight"
          }`}
        >
          {label}
        </span>
        <div className="h-1.5 w-1.5 shrink-0 mt-0.5" style={{ backgroundColor: "#FF6520", borderRadius: "var(--radius-full)" }} />
      </div>

      {/* Divider */}
      <hr className="border-black/[0.07] dark:border-white/[0.08]" />

      {/* Large faded abbreviation */}
      <span
        className="max-w-full font-bold leading-none uppercase tracking-tight text-black/[0.09] dark:text-white/[0.07] self-end"
        style={{ fontSize: abbrSize }}
      >
        {abbr}
      </span>
    </div>
  );
};

export default FileCard;