import type { Meta, StoryObj } from "@storybook/nextjs-vite"

import { ChipStatic } from "./ChipStatic.tsx"
import { MaterialIcon } from "../Icons/MaterialIcon/index.tsx"

const meta: Meta<typeof ChipStatic> = {
  title: "Core Components/ChipStatic",
  component: ChipStatic,
}

export default meta

type Story = StoryObj<typeof ChipStatic>

export const Neutral: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <ChipStatic color="Neutral" size="xs" lowerCase>
        <MaterialIcon icon="lock" />
        lowerCase xs
        <MaterialIcon icon="lock" />
      </ChipStatic>

      <ChipStatic color="Neutral" size="xs">
        <MaterialIcon icon="lock" />
        xs
        <MaterialIcon icon="lock" />
      </ChipStatic>

      <ChipStatic color="Neutral" size="sm">
        <MaterialIcon icon="lock" />
        sm
        <MaterialIcon icon="lock" />
      </ChipStatic>

      <ChipStatic color="Neutral" size="lg">
        <MaterialIcon icon="lock" />
        lg
        <MaterialIcon icon="lock" />
      </ChipStatic>
    </div>
  ),
}

export const Subtle: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <ChipStatic color="Subtle" size="xs" lowerCase>
        <MaterialIcon icon="lock" />
        lowerCase xs
        <MaterialIcon icon="lock" />
      </ChipStatic>

      <ChipStatic color="Subtle" size="xs">
        <MaterialIcon icon="lock" />
        xs
        <MaterialIcon icon="lock" />
      </ChipStatic>

      <ChipStatic color="Subtle" size="sm">
        <MaterialIcon icon="lock" />
        sm
        <MaterialIcon icon="lock" />
      </ChipStatic>

      <ChipStatic color="Subtle" size="lg">
        <MaterialIcon icon="lock" />
        lg
        <MaterialIcon icon="lock" />
      </ChipStatic>
    </div>
  ),
}

export const Disabled: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <ChipStatic color="Disabled" size="xs" lowerCase>
        <MaterialIcon icon="lock" />
        lowerCase xs
        <MaterialIcon icon="lock" />
      </ChipStatic>

      <ChipStatic color="Disabled" size="xs">
        <MaterialIcon icon="lock" />
        xs
        <MaterialIcon icon="lock" />
      </ChipStatic>

      <ChipStatic color="Disabled" size="sm">
        <MaterialIcon icon="lock" />
        sm
        <MaterialIcon icon="lock" />
      </ChipStatic>

      <ChipStatic color="Disabled" size="lg">
        <MaterialIcon icon="lock" />
        lg
        <MaterialIcon icon="lock" />
      </ChipStatic>
    </div>
  ),
}