import type { Playlist } from '../../lib/playlists';

type Props = {
  playlist: Playlist;
  openModal: (playlist: Playlist) => void;
};

const PlaylistCard = ({ playlist, openModal }: Props) => {
  const handleOpenModal = () => openModal(playlist);

  return (
    <button
      type="button"
      className="relative group w-full aspect-[22/23] rounded-lg border-2 border-transparent hover:border-base-content box-border overflow-hidden transition-colors ease-in"
      onClick={handleOpenModal}
    >
      <div className="flex items-center justify-center absolute z-10 top-0 right-0 bottom-0 left-0 bg-[#00000035] opacity-0 group-hover:opacity-100 transition-opacity ease-in" />
      <div className="relative pb-[105%]">
        <img
          className="absolute block object-cover object-center w-full h-full"
          alt={playlist.name}
          src={playlist.cover}
        />
      </div>
    </button>
  );
};

export default PlaylistCard;