import { Typography } from "@mui/joy";
import { useAppSelector, useAppDispatch } from "../../store/hooks";
import { useEffect } from "react";
import { fetchNamedEntities } from "../../store/namedEntitySlice";
import { Box } from "@mui/joy";
import TagsList from "./TagsList";

function Tags() {
    const namedEntities = useAppSelector((state) => state.namedEntity.all);
    const status = useAppSelector((state) => state.namedEntity.status);
    const dispatch = useAppDispatch();

    useEffect(() => {
        dispatch(fetchNamedEntities());
    }, [dispatch]);

    return (
        <div>
            <Typography level="h2" component="h1">
                Tags
            </Typography>

            <Box sx={{ marginTop: 2, marginBottom: 2 }}>
                <TagsList tags={namedEntities} />
            </Box>
        </div>
    );
}

export default Tags;