import { useNavigate } from 'react-router-dom';

// SUPPORTED JSON FORMAT
// [
//     {
//         "id": 1,
//         "title": "Video minecraft",
//         "thumbnail": "/api/media/thumbnail/78438E11ABA5D0C8.webp",
//         "video_description": "Cest une super video minecraft",
//         "channel": 1,
//         "visibility": "public",
//         "file": "/api/media/video/78438E11ABA5D0C8.mp4",
//         "slug": "78438E11ABA5D0C8",
//         "format": "mp4",
//         "release_date": "2025-08-11T11:14:01.357Z",
//         "channel_id": 1,
//         "owner": 2,
//         "views": "2",
//         "creator": { 
//              "name": "astria",
//              "profilePicture": "/api/media/profile/sacha.jpg",
//              "description": "salut tout le monde"
//         },
//         "type": "video"
//     }
// ]

export default function VideoCard({ video }) {
    const navigation = useNavigate();
    const handleClick = () => {
        navigation(`/video/${video.id}`, {
            state: { video }
        })
    }
    return (
        <div className="flex flex-col glassmorphism w-full p-6 cursor-pointer" onClick={handleClick} >
            <div className="aspect-video rounded-sm overflow-hidden">
                <img
                    src={video.thumbnail}
                    alt={video.title}
                    className="w-full h-full object-cover"
                />
            </div>
            <h2 className="text-2xl font-medium font-inter mt-3 text-white">{video.title}</h2>
            <div className="text-sm text-gray-400 mt-1 flex items-center">
                <img src={video.creator.profilePicture} alt={video.title} className="w-12 aspect-square rounded-full object-cover" />
                <span className="ml-2">{video.creator.name}</span>
                <span className="ml-3.5">{video.views} vues</span>
            </div>
        </div>
    );
}