import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import { Link } from 'react-router-dom';
interface ComponentProps {
    building: {
        img: string, 
        title: string, 
        description: string[]
    },
    cardNum: number;
    idx: number;
  }


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


function BuildCard({ building,cardNum,idx} : ComponentProps) {
    return (
      <Card  style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{  display: 'flex' }} >
        <CardMedia
            component="img"
            alt={ building.title }
            image={ building.img }
        />
        <Box>
          <CardContent>
            <Typography gutterBottom variant="h5" >
              { building.title }
            </Typography>
            { building.description.map((item, ind) => (
              <StyledTypography key={ind} variant="body2">    
                { item }
              </StyledTypography>
            ))}
          </CardContent>
          <CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} >
            <Link key={cardNum} to={"/building/" + idx}><Button size="small">Подробнее</Button></Link>
          </CardActions>
        </Box>
      </Card>
    )
}

export default BuildCard;