import { SVGS } from "../assets/svgs"
import { ParsedFile } from "./FileUploader"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export const FileCard = ({
  file,
  handleRemove,
}: {
  file: ParsedFile
  handleRemove: () => void
}) => (
  <div className="flex items-center justify-between bg-white shadow-sm p-2 rounded-lg w-[100px]">
    <Tooltip>
      <TooltipTrigger asChild>
        <span className="text-xs text-gray-800 truncate">
          {file.name}
        </span>
      </TooltipTrigger>
      <TooltipContent>
        <p>{file.name}</p>
      </TooltipContent>
    </Tooltip>
    <button
      onClick={handleRemove}
      className="p-1 text-red-500 hover:text-red-700 transition-colors cursor-pointer "
    >
      {SVGS.trash}
    </button>
  </div>
)
