import { SVGS } from "../assets/svgs"
import { UploadedFile } from "../utils/store"

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