import type { YouTubeData } from './types';

export function YouTubeVideosCard({ data, onExpand }: { data: YouTubeData; onExpand: () => void }) {
  const { query, videos } = data;

  return (
    <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 my-2 not-prose" style={{ maxWidth: 600 }}>
      {/* Header */}
      <div className="flex items-center gap-2 mb-3">
        <span className="text-sm">&#9654;</span>
        <span className="font-semibold text-slate-700" style={{ fontSize: 13 }}>YouTube 検索結果: 「{query}」</span>
        <span className="text-slate-400 ml-auto" style={{ fontSize: 11 }}>{videos.length}件</span>
      </div>

      {/* Horizontal scroll thumbnails */}
      <div className="flex gap-3 overflow-x-auto pb-1">
        {videos.slice(0, 5).map((v) => (
          <a
            key={v.videoId}
            href={v.videoUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="bg-white border border-slate-200 rounded-lg overflow-hidden cursor-pointer hover:border-red-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
            style={{ minWidth: 200, maxWidth: 200 }}
          >
            <div className="relative">
              <img
                src={v.thumbnailUrl}
                alt={v.title}
                className="w-full object-cover"
                style={{ height: 112 }}
                loading="lazy"
              />
              {v.duration && (
                <span
                  className="absolute bottom-1 right-1 bg-black/80 text-white px-1 rounded"
                  style={{ fontSize: 10 }}
                >
                  {v.duration}
                </span>
              )}
            </div>
            <div className="p-2">
              <div className="font-semibold text-slate-800 leading-tight mb-1 line-clamp-2" style={{ fontSize: 11 }}>
                {v.title}
              </div>
              <div className="text-slate-400 truncate" style={{ fontSize: 10 }}>
                {v.channelName}
              </div>
              {v.viewCount && (
                <div className="text-slate-400" style={{ fontSize: 10 }}>{v.viewCount}</div>
              )}
            </div>
          </a>
        ))}
      </div>

      {/* Expand button */}
      <div className="text-center mt-2">
        <button
          onClick={onExpand}
          className="text-blue-500 hover:text-blue-700 cursor-pointer bg-transparent border-none"
          style={{ fontSize: 11 }}
        >
          &#9660; 詳細を表示
        </button>
      </div>
    </div>
  );
}
