import { Grid } from "@mui/joy";
import { TagsListProps } from "../props/TagsListProps";
import TagCard from "./cards/TagCard";

function TagsList({ tags }: TagsListProps) {
    return (
        <div>
            <Grid
                container
                spacing={2}
                sx={{ flexGrow: 1, marginTop: 2, marginBottom: 2 }}>
                {tags.map((tag) => {
                    return (
                        <Grid>
                            <TagCard key={tag.name} tag={tag} />
                        </Grid>
                    );
                })}
            </Grid>
        </div>
    );
}

export default TagsList;