import React from 'react';
import { mdiPlayCircle } from '@mdi/js';
import BaseIcon from './BaseIcon';

const VideoCard = ({ video }) => {
  const thumbnailUrl = video.thumbnail?.[0]?.url || 'https://via.placeholder.com/400x225?text=No+Thumbnail';

  return (
    <div className="group relative bg-gray-900 rounded-2xl overflow-hidden transition-transform duration-300 hover:scale-105 shadow-xl">
      <div className="aspect-video relative">
        <img
          src={thumbnailUrl}
          alt={video.title}
          className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity"
        />
        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
          <BaseIcon path={mdiPlayCircle} size={64} className="text-white drop-shadow-lg" />
        </div>
      </div>
      <div className="p-4">
        <h3 className="text-white font-bold text-lg line-clamp-1">{video.title || 'Untitled Video'}</h3>
        <p className="text-gray-400 text-sm line-clamp-2 mt-1">{video.description || 'No description available.'}</p>
        <div className="mt-3 flex flex-wrap gap-2">
          {video.tags?.slice(0, 3).map((tag) => (
            <span key={tag.id} className="text-[10px] uppercase tracking-wider bg-violet-500/20 text-violet-400 px-2 py-1 rounded-full border border-violet-500/30">
              {tag.name}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};

export default VideoCard;