import type { PosterItem } from '../../data/types'

/**
 * 竖版海报卡：2:3 封面 + 底部渐变遮罩上的标题。
 * 传入 onOpen 时整张卡变成按钮，点击进入该电影的详情页。
 */
type PosterCardProps = {
  item: PosterItem
  onOpen?: (itemId: string) => void
}

export function PosterCard({ item, onOpen }: PosterCardProps) {
  const content = (
    <>
      <img className="cover cover--poster" src={item.cover} alt={item.title} loading="lazy" />
      <span className="cover-caption">{item.title}</span>
    </>
  )

  if (onOpen === undefined) {
    return <figure className="cover-card">{content}</figure>
  }

  return (
    <button type="button" className="cover-card" title={item.title} onClick={() => onOpen(item.id)}>
      {content}
    </button>
  )
}