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 buildings from '../data.tsx';
import { useParams, Link } from 'react-router-dom';


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


function Building() {
    const { id } = useParams();
    const building = buildings[Number(id)];
    return (
        <>

            <Card sx={{ display: 'flex', flexDirection: "column", alignItems: "center" }} >
                <Box sx={{ display: 'flex', flexDirection: 'row', alignSelf: 'flex-start', gap: '0.5em', m: '1em' }}>
                    <Link to="/" style={{ textDecoration: 'none' }}><Typography sx={{color:"#659adf"}}>ГЛАВНАЯ</Typography></Link>  &gt; {building.title}
                </Box>
                <Typography gutterBottom variant="h5" >
                    {building.title}
                </Typography>
                <CardMedia
                    component="img"
                    alt={building.title}
                    image={building.img}
                    sx={{ width:"auto", maxHeight:"45vh",  rounded: '8px' }}
                />
                <Box>
                    <CardContent>

                        <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: {xs:0, sm:'2em'}}}>
                            {building.description.map((item, ind) => (
                                <StyledTypography key={ind} variant="body2" sx={{ flex: 1 }}>
                                    {item}
                                </StyledTypography>
                            ))}
                        </Box>
                    </CardContent>

                </Box>
            </Card>
        </>
    )
}

export default Building;