import { useEffect } from "react";
import { Stack, Typography } from '@mui/joy';
import { useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import { fetchNewsChannel } from "../../store/newsChannelSlice";

function NewsChannel() {
    const { id } = useParams<{ id: string }>();

    const newsChannel = useAppSelector((state) => state.newsChannel.newsChannel);
    const status = useAppSelector((state) => state.newsChannel.status);
    const dispatch = useAppDispatch();

    useEffect(() => {
        dispatch(fetchNewsChannel(Number(id)));
    }, [dispatch, id]);

    return (
        <div>
            <Stack spacing={2}>
                <Typography level="h1" component="h2">
                    News Channel
                </Typography>

                <Typography level="h2" component="h3">
                    {newsChannel.title}
                </Typography>
            </Stack>
        </div>
    );
}

export default NewsChannel;