"use client"

import Image from "next/image"

type IProps = {
  album: any
}

export default function AlbumVertical({ album }: IProps) {
  return (
    <div className="bg-[var(--secondary-100)] text-white flex items-stretch p-3 rounded-lg gap-4 min-w-80 max-w-[400px]">
      <div className="w-32 shrink-0">
        <Image
          src={album.cover}
          alt={album.title}
          width={130}
          height={130}
          style={{
            width: "100%",
          }}
          className="rounded-lg object-cover aspect-square"
          onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
        />
      </div>
      <div className="grow flex flex-col">
        <div className="grow">
          <h3 className="font-semibold text-base lg:text-lg mb-2">{album.title}</h3>
          <div
            className="line-clamp-4"
            dangerouslySetInnerHTML={{ __html: album.description }}></div>
        </div>
        <p className="text-xs">{album.items_num || 0} Song</p>
      </div>
    </div>
  )
}