import * as React from 'react';
import Avatar from '@mui/joy/Avatar';
import AvatarGroup from '@mui/joy/AvatarGroup';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
import CardActions from '@mui/joy/CardActions';
import IconButton from '@mui/joy/IconButton';
import Typography from '@mui/joy/Typography';
import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
import FeedIcon from '@mui/icons-material/Feed';
import { NewsChannel } from "../../../model/NewsChannel";
import ArticleIcon from '@mui/icons-material/Article';
import { NewsChannelCardProps } from "../../props/NewsChannelCardProps";
import './NewsChannelCard.css';
import { Link } from "react-router-dom";

import { useNavigate } from "react-router-dom";

function NewsChannelCard({ newsChannel }: NewsChannelCardProps) {
    const navigation = useNavigate();

    return (
        <Card
            variant="outlined"
            sx={{
                width: 320,
            }}
        >
            <Box
                sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                }}
            >
                <Avatar className="news-channel-logo" src={newsChannel.image_url} size="lg">
                    <FeedIcon />
                </Avatar>
                <AvatarGroup size="sm" sx={{ '--Avatar-size': '28px' }}>
                    <Avatar>
                        <ArticleIcon fontSize="small" />
                    </Avatar>
                    <Avatar>+4K</Avatar>
                </AvatarGroup>
            </Box>
            <CardContent>
                <Typography level="title-lg">{newsChannel.title}</Typography>
                <Typography level="body-sm">
                    {newsChannel.description}
                </Typography>
            </CardContent>
            <CardActions buttonFlex="0 1 120px">
                <IconButton variant="outlined" color="neutral" sx={{ mr: 'auto' }}>
                    <FavoriteBorder />
                </IconButton>
                <Button variant="solid" color="primary"
                onClick={() => navigation(`/news-channels/${newsChannel.id}`)}>
                    View
                </Button>
            </CardActions>
        </Card >
    );
}

export default NewsChannelCard;