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

export function YouTubeVideosDetail({ data }: { data: YouTubeData }) {
  const { query, videos } = data;

  return (
    <div className="p-6">
      <h2 className="text-lg font-bold text-slate-800 mb-4">
        &#9654; YouTube 検索結果: 「{query}」
      </h2>

      <div className="space-y-6">
        {videos.map((v, i) => (
          <div key={v.videoId} className="bg-white border border-slate-200 rounded-xl p-4">
            <div className="flex gap-4 flex-col sm:flex-row">
              {/* Thumbnail */}
              <a
                href={v.videoUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="relative flex-shrink-0 no-underline"
              >
                <img
                  src={v.thumbnailUrl}
                  alt={v.title}
                  className="rounded-lg object-cover"
                  style={{ width: 240, height: 135 }}
                  loading="lazy"
                />
                {v.duration && (
                  <span
                    className="absolute bottom-2 right-2 bg-black/80 text-white px-1.5 py-0.5 rounded"
                    style={{ fontSize: 11 }}
                  >
                    {v.duration}
                  </span>
                )}
              </a>

              {/* Info */}
              <div className="flex-1 min-w-0">
                <div className="text-slate-400 mb-1" style={{ fontSize: 13 }}>#{i + 1}</div>
                <h3 className="text-sm font-semibold text-slate-800 leading-snug mb-2">{v.title}</h3>
                <div className="text-xs text-slate-500 mb-1">{v.channelName}</div>
                <div className="flex gap-3 text-xs text-slate-400 mb-2">
                  {v.viewCount && <span>&#128065; {v.viewCount}</span>}
                  {v.publishedAt && <span>&#128197; {v.publishedAt}</span>}
                </div>
                {v.description && (
                  <div className="text-xs text-slate-500 leading-relaxed mb-3">{v.description}</div>
                )}
                <a
                  href={v.videoUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1 px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs font-semibold rounded-lg no-underline transition-colors"
                >
                  YouTube で見る
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
