import React from 'react';

export default function MovieCard({ imdbId }) {
  const CARD_WIDTH = 190;
  const CARD_HEIGHT = 330;

  // 直接生成本地图片路径
  const posterUrl = `/img/posters/${imdbId}.jpg`;

  // 简单判断图片是否存在（通过 onError 回调处理）
  const [hasError, setHasError] = React.useState(false);

  if (hasError) {
    return (
      <div
        style={{
          width: CARD_WIDTH,
          height: CARD_HEIGHT,
          background: '#f8f8f8',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: '#bbb',
          fontSize: '12px',
          flexShrink: 0,
        }}
      >
        无海报
      </div>
    );
  }

  return (
    <a
      href={`https://www.imdb.com/title/${imdbId}/`}
      target="_blank"
      rel="noopener noreferrer"
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: CARD_WIDTH,
        height: CARD_HEIGHT,
        textDecoration: 'none',
        flexShrink: 0,
        overflow: 'hidden',
      }}
    >
      <img
        src={posterUrl}
        alt="电影海报"
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'scale-down',
          display: 'block',
        }}
        onError={() => setHasError(true)}
      />
    </a>
  );
}