MoviePage.tsx

import { Badge, Descriptions, Image } from "antd";
import React from "react";
import { Link, useParams } from "react-router-dom";
import { MovieIO } from "./Preview";



export const MoviePage = () => {

    const {id, name} = useParams();
    //need to fetch /channel/${id} here to preview data

    const exampleMovie: MovieIO= {
        id: "789",
        name: "Saw",
        originalName: "Saw",
        intro:  "Jigsaw is the bad guy and this is the game",
        picture: "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Jo6M-3oyAlMsB4-F__Z9bwHaHa%26pid%3DApi&f=1",
        published:  "1.1.2000",
        runTimeMinutes: 120,
        director: {id: "123456789", name: "Karel", surname: "Vomacka", birthdate: "20.2.1987"}
    }
       

    return (
        <>
        <Descriptions title={exampleMovie.name} bordered style={{ padding: "5%" }}>
            <Descriptions.Item label="Title picture" span={3}><Image src={exampleMovie.picture}></Image></Descriptions.Item>
            <Descriptions.Item label="Name" span={2}>{exampleMovie.name}</Descriptions.Item>
            <Descriptions.Item label="Original Name">{exampleMovie.originalName}</Descriptions.Item>
            <Descriptions.Item label="Description" span={3}>{exampleMovie.intro}</Descriptions.Item>
            <Descriptions.Item label="Published">{exampleMovie.published}</Descriptions.Item>
            <Descriptions.Item label="Runtime" span={2}>
                {exampleMovie.runTimeMinutes} minutes
            </Descriptions.Item>



        </Descriptions>
        <Descriptions title="Director" bordered style={{ padding: "5%" }}>
                <Descriptions.Item label="Name" span={3}><Link to={`/director/${exampleMovie.director.id}`}>{exampleMovie.director.name} {exampleMovie.director.surname}</Link></Descriptions.Item>
                <Descriptions.Item label="Birthdate">{exampleMovie.director.birthdate}</Descriptions.Item>
               
            </Descriptions>
            
            
            </>
      
      
      )

}