import { Container, Button, Stack } from "react-bootstrap";

import { useAppSelector } from "../hooks";
import { selectCategories } from "../store/cluesSlice";

const CluesDisplay = () => {
  const categories = useAppSelector(selectCategories);
  return (
    <Container>
      <Stack gap={3} className="text-center">
        {categories.map(({ name }) => (
          <>
            <h2>{name}</h2>
            {[200, 400, 600, 800, 1000].map((value) => (
              <Button key={value}>{value}</Button>
            ))}
          </>
        ))}
      </Stack>
    </Container>
  );
};

export default CluesDisplay;