import { Cover } from '@stash/ui'
import type { PosterItem } from '../../data/types'

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

export function PosterCard({ item, onOpen }: PosterCardProps) {
  return (
    <Cover
      src={item.cover}
      alt={item.title}
      caption={item.title}
      ratio="poster"
      onClick={onOpen === undefined ? undefined : () => onOpen(item.id)}
    />
  )
}