import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { X, Play } from "lucide-react";

interface VideoModalProps {
  isOpen: boolean;
  onClose: () => void;
  videoSrc: string;
  title: string;
  description?: string;
}

export const VideoModal = ({ isOpen, onClose, videoSrc, title, description }: VideoModalProps) => {
  const handlePlayVideo = () => {
    // In a real implementation, this would play the actual video
    console.log('Playing video:', videoSrc);
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-3xl">
        <DialogHeader>
          <div className="flex items-center justify-between">
            <DialogTitle>{title}</DialogTitle>
            <Button
              variant="ghost"
              size="sm"
              onClick={onClose}
              className="h-6 w-6 p-0"
              aria-label="Close video modal"
            >
              <X className="h-4 w-4" />
            </Button>
          </div>
          {description && (
            <DialogDescription>{description}</DialogDescription>
          )}
        </DialogHeader>

        <div className="space-y-4">
          {/* Video Preview */}
          <div className="relative aspect-video bg-black rounded-lg overflow-hidden">
            <img 
              src={videoSrc}
              alt={`${title} video thumbnail`}
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 flex items-center justify-center bg-black/20">
              <Button
                onClick={handlePlayVideo}
                size="lg"
                className="bg-white/90 hover:bg-white text-black hover:scale-110 transition-all duration-300"
                aria-label={`Play ${title} video`}
              >
                <Play className="w-8 h-8 mr-2" />
                Play Video
              </Button>
            </div>
          </div>

          {/* Video Description */}
          <div className="text-center space-y-2">
            <p className="text-muted-foreground">
              Learn more about our professional grant writing services and how we can help you secure funding for your business, non-profit, or real estate project.
            </p>
            <Button variant="outline" onClick={onClose} className="mt-4">
              Close
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};