import Image from "next/image";


export interface Trash {
    file: string,
    description: string,
    filetype: string,
    filesize: string,
}

const TrashCards = ({ file, description, filetype, filesize }: Trash) => {
    return (
        <div className="w-[191px] h-[195px] flex flex-col overflow-hidden rounded-sm bg-white shadow-sm hover:transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <Image src={file} alt={description} width={191} height={150} className="w-[191px] h-[150px] rounded-sm  object-cover min-h-[140px]" />
            <div className="flex flex-col gap-1 p-2">
                <p className="text-sm font-medium truncate">{description}</p>
                <div className="flex gap-1 items-center align-middle p-0">
                    <p className="text-xs text-gray-500 ">{filetype}</p>{" "}
                    .{" "}
                    <p className="text-xs text-gray-500">{filesize}</p>
                </div>
            </div>
        </div>

    );
}

export default TrashCards;