import { Chip, Avatar } from '@mui/joy';
import { NewsChannel } from "../../../model/NewsChannel";
import FeedIcon from '@mui/icons-material/Feed';

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

function NewsChannelChip({ newsChannel }: { newsChannel: NewsChannel }) {
    const navigation = useNavigate();

    return (
        <Chip
            onClick={() => navigation(`/news-channels/${newsChannel.id}`)}
            size="md"
            startDecorator={<Avatar className="news-channel-logo" src={newsChannel?.image_url}>
                <FeedIcon />
            </Avatar>}
            variant="outlined"
        >
            {newsChannel?.title}
        </Chip>
    );

}

export default NewsChannelChip;