import React, { useState } from 'react';

interface Video {
  id: number;
  scene: string;
  imageUrl: string;
}

const videos: Video[] = [
    {
        id: 1,
        scene: 'Beach Scene',
        imageUrl: 'https://placehold.co/200x300/cccccc/ffffff?text=Scene+1'
    },
    {
        id: 2,
        scene: 'Bedroom Scene',
        imageUrl: 'https://placehold.co/200x300/dddddd/333333?text=Scene+2'

    },
    {
        id: 3,
        scene: 'Pool Scene',
        imageUrl: 'https://placehold.co/200x300/eeeeee/555555?text=Scene+3'
    },
    {
        id: 4,
        scene: 'Bathroom Scene',
        imageUrl: 'https://placehold.co/200x300/fafafa/777777?text=Scene+4'
    },
    {
        id: 5,
        scene: 'Kitchen Scene',
        imageUrl: 'https://placehold.co/200x300/f0f0f0/999999?text=Scene+5'
    }
];

// Extracted VideoCard Component
const VideoCard: React.FC<{ video: Video; onClick: (video: Video) => void }> = ({ video, onClick }) => {
    return (
        <div
            onClick={() => onClick(video)}
            className="cursor-pointer rounded-xl overflow-hidden shadow-md transition-shadow duration-300 hover:shadow-xl bg-white"
        >
            <div className="aspect-w-2 aspect-h-3">
            <img
                src={video.imageUrl}
                alt={video.scene}
                className="w-full h-full object-cover"
             />
            </div>
            <div className="p-4">
                <h2 className="text-lg font-semibold text-gray-700">{video.scene}</h2>
            </div>
        </div>
    );
};

const App: React.FC = () => {
    const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);

    const handleVideoClick = (video: Video) => {
        setSelectedVideo(video);
    };

    const handleCreateVideo = () => {
        alert(`Video of scene ${selectedVideo?.scene} created!`); // Placehoder for actual video generation
    };

    return (
        <div className="flex flex-col items-center p-4 bg-gray-100 min-h-screen">
            <h1 className="text-2xl font-bold mb-8 text-gray-800">10 Second Video Creator</h1>
            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
                {videos.map((video) => (
                    <VideoCard key={video.id} video={video} onClick={handleVideoClick} />
                ))}
            </div>
            {selectedVideo && (
                <div className="bg-white p-6 rounded-xl shadow-md w-full max-w-md">
                    <h2 className="text-xl font-semibold mb-4 text-gray-800">Preview</h2>
                    <div className="aspect-w-16 aspect-h-9 overflow-hidden rounded-md">
                        <img src={selectedVideo.imageUrl} alt={selectedVideo.scene} className="object-cover" />
                    </div>

                    <p className="mt-4 text-gray-700">Scene: {selectedVideo.scene}</p>
                    <p className="text-gray-600 text-sm mt-2">Duration: 10 seconds</p>
                    <button
                        onClick={handleCreateVideo}
                        className="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        Create Video
                    </button>
                </div>
            )}
        </div>
    );
};

export default App;