import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import {sidecardData}  from '../data.tsx';
import { useParams, Link } from 'react-router-dom';
import BackgroundVideo from "./components/BackgroundVideo";

const StyledTypography = styled(Typography)(({ theme }) => ({
    color: theme.palette.text.secondary,
    textAlign: 'justify',
    marginBottom: '1em',
}));


function ProjectDetails() {
    const { id } = useParams();
    const projectDetails = sidecardData[Number(id)];
    return (
        <>
        <div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", minHeight:"100vh"}}>
            <Card sx={{ display: 'flex', flexDirection: "column", alignItems: "center", backgroundColor:"#FFFFFFA8"}} >
                <Box sx={{ display: 'flex', flexDirection: 'row', alignSelf: 'flex-start', gap: '0.5em', m: '1em' }}>
                    <Link to="/" style={{ textDecoration: 'none' }}><Typography sx={{color:"#659adf"}}>Main</Typography></Link>  &gt; {projectDetails.title}
                </Box>
                <Typography gutterBottom variant="h5" >
                    {projectDetails.title}
                </Typography>
                <CardMedia
                    component="img"
                    alt={projectDetails.title}
                    image={projectDetails.img}
                    sx={{ width:"auto", maxHeight:"45vh",  rounded: '8px' }}
                />
                <Box>
                    <CardContent>
                        <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: {xs:0, sm:'2em'}}}>
                            {projectDetails.description.map((item, ind) => (
                                <StyledTypography key={ind} variant="body2" sx={{ flex: 1 }}>
                                    {item}
                                </StyledTypography>
                            ))}
                        </Box>
                    </CardContent>

                </Box>
            </Card>
            <BackgroundVideo />
        </div>
        </>
    )
}

export default ProjectDetails;