import { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { breakpoints } from "../../constants/breakpoints"
import { Media } from "./index"

type Story = StoryObj<typeof Media>

const meta: Meta<typeof Media> = {
  title: "Design System/Media",
  component: Media,
}

export default meta

export const Base: Story = {
  args: {
    greaterThanOrEqual: "sm",
    children: <div className="rounded bg-success p-5">Hello world</div>,
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        {(Object.keys(breakpoints) as (keyof typeof breakpoints)[]).map(bp => (
          <Media greaterThanOrEqual={bp} key={bp}>
            <div className="rounded bg-success p-5">
              Visible at greaterThanOrEqual {breakpoints[bp]}px.
            </div>
          </Media>
        ))}
      </TestGridContainer>
    )
  },
}