import { Box, Text } from "../components";
import { styled } from "./theme";
import { customScrollbars } from "./scrollbars";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta = {
  title: "Theme/Scrollbars",
};

export default meta;

const CustomBox = styled(Box, customScrollbars);

export const Default: StoryObj = {
  render: () => (
    <Box>
      <CustomBox style={{ width: 200, height: 200, overflow: "scroll" }}>
        <Box style={{ width: 400, height: 400 }}>
          <Text css={{ color: "$off-white-72" }} variant="body3">
            This container should have nice custom scrollbars
          </Text>
        </Box>
      </CustomBox>
    </Box>
  ),
};