import React from 'react';

interface Props {
  name: string;
  thumb?: string;
  onClick: () => void;
}

export default function PDFCard({ name, thumb, onClick }: Props) {
  return (
    <div
      className="border border-white rounded-md cursor-pointer group"
      onClick={onClick}
    >
      <div
        className="h-[130px] rounded-t-md bg-cover bg-center"
        style={{
          backgroundImage: `url(${
            thumb || 'https://cdn-icons-png.flaticon.com/512/4208/4208479.png'
          })`,
        }}
      ></div>
      <div className="h-[50px] flex justify-center items-center group-hover:bg-darkerBlue rounded-b-md px-16">
        <span className="line-clamp-1 text-center">{name}</span>
      </div>
    </div>
  );
}