import { Box, Card, CardContent, CardOverflow, AspectRatio, Typography, Link } from '@mui/joy';
import { NewsItemCardProps } from "../../props/NewsItemCardProps";
import { Link as RouterLink } from 'react-router-dom';

function ArticleCard({ newsItem }: NewsItemCardProps) {
    return (
        <Card orientation="horizontal" variant="plain">
            <CardOverflow>
                {newsItem.enclosure_url || newsItem.thumbnail_url ?
                    <AspectRatio ratio="1" sx={{ width: 250, maxHeight: 250, maxWidth: 250, }}>
                        <img
                            src={newsItem.enclosure_url ? newsItem.enclosure_url : newsItem.thumbnail_url}
                            srcSet={newsItem.enclosure_url ? newsItem.enclosure_url : newsItem.thumbnail_url}
                            loading="lazy"
                            alt=""
                        />
                    </AspectRatio> : ''}
            </CardOverflow>
            <CardContent>
                <Typography level="body-lg" component="p">
                    {newsItem.description}
                </Typography>

                <Box sx={{ display: 'flex', gap: 1.5 }}>
                    <Link component={RouterLink} to={newsItem.link}>
                        Read original article &rarr;
                    </Link>
                </Box>
            </CardContent>
        </Card>
    );
}

export default ArticleCard;