import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardHeader from '@mui/material/CardHeader';
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 {
  data: {
    img: string,
    title: string,
    description: string[]
  },
  idx: number;
}


const StyledTypography = styled(Typography)(({ theme }) => ({
  color: theme.palette.text.secondary,
  textAlign: 'justify',
  marginBottom: '2px',
  fontSize: '12px',
  padding: "5px"
}));




function SmallCard({ data,idx }: ComponentProps) {
  // if(reverseModifier){
  //   [textA,textB] = [textB,textA];
  // }
  let buf = data.description.reduce((acc, val) => acc + " " + val, "");

  if (buf.length > 70) {
    buf = buf.slice(0, 70) + "...";
  }

  const textPart = buf;
  return (
    <Card sx={{ maxWidth: { xs: "100%", md: "300px" }, }}>

      <Box sx={{
        display: 'flex',
        'flexDirection': {
          xs: 'column',
          md: 'row'
        },
      }}>
        <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }} >
          <CardHeader title={data.title} sx={{ p: "5px", '& .MuiCardHeader-title': { fontSize: '13px' } }} />
          <StyledTypography variant="body2" sx={{ display: { xs: "none", md: "block" } }}>
            {textPart}
          </StyledTypography>
          <StyledTypography variant="body2" sx={{ display: { xs: "block", md: "none" } }}>
            {data.description}
          </StyledTypography>
          <CardActions sx={{ justifyContent: 'end', alignContent: "flex-end", p: 0 }} >
            <Link key={idx} to={"/project-details/" + idx}>
              <Button size="small" sx={{ p: "0 5px", fontSize: "10px" }}>Check it out</Button>
            </Link>
          </CardActions>
        </Box>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', maxWidth: { xs: '100%', md: "40%" }, bgcolor: "#0581f513" }} >
          <CardMedia
            component="img"
            alt={data.title}
            image={data.img}
            sx={{ objectFit: 'fill' }}
          />
        </Box>
      </Box>
    </Card>
  )
}

export default SmallCard;