import { useState } from "react";
import { Play } from "lucide-react";

interface VideoPlayerProps {
  thumbnailUrl: string;
  duration: string;
  videoUrl?: string;
}

export function VideoPlayer({ thumbnailUrl, duration, videoUrl }: VideoPlayerProps) {
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <div
      className="rounded-2xl p-3"
      style={{
        background: "linear-gradient(135deg, rgba(100, 200, 255, 0.9) 0%, rgba(50, 150, 220, 0.9) 100%)",
        border: "1.5px solid rgba(150, 220, 255, 0.4)",
        boxShadow: "0 4px 16px rgba(100, 200, 255, 0.4)",
      }}
    >
      <div className="relative rounded-xl overflow-hidden group cursor-pointer">
        <img
          src={thumbnailUrl}
          alt="ویدیو"
          className="w-full h-auto max-h-64 object-cover"
        />
        
        {/* Overlay with play button */}
        <div
          className="absolute inset-0 flex items-center justify-center transition-all"
          style={{
            background: "rgba(0, 0, 0, 0.3)",
          }}
        >
          <div
            className="w-16 h-16 rounded-full flex items-center justify-center transition-all group-hover:scale-110"
            style={{
              background: "rgba(255, 255, 255, 0.9)",
              boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)",
            }}
          >
            <Play className="w-7 h-7 fill-blue-500 text-blue-500" style={{ marginLeft: "3px" }} />
          </div>
        </div>

        {/* Duration badge */}
        <div
          className="absolute bottom-3 right-3 px-2 py-1 rounded text-xs font-bold text-white"
          style={{
            background: "rgba(0, 0, 0, 0.6)",
          }}
        >
          {duration}
        </div>
      </div>
    </div>
  );
}
