import type { Meta, StoryObj } from "@storybook/react";

const ColorBox = ({
  colorClass,
  label,
}: {
  colorClass: string;
  label: string;
}) => (
  <div className="m-4 text-center">
    <div
      className={`w-24 h-24 mx-auto ${colorClass} shadow-lg shadow-${colorClass}/50`}
      style={{
        boxShadow: `0px 0px 10px ${colorClass}, 3px 3px 15px ${colorClass}`,
      }}
    />
    <div className="mt-2">{label}</div>
  </div>
);

const meta: Meta = {
  component: ColorBox,
};

export default meta;

type Story = StoryObj<typeof ColorBox>;

const colorClasses = {
  neutral: [
    "bg-neutral-0",
    "bg-neutral-50",
    "bg-neutral-100",
    "bg-neutral-200",
    "bg-neutral-300",
    "bg-neutral-400",
    "bg-neutral-500",
    "bg-neutral-600",
    "bg-neutral-700",
    "bg-neutral-800",
    "bg-neutral-900",
    "bg-neutral-950",
    "bg-neutral-1000",
  ],
  primary: [
    "bg-primary-50",
    "bg-primary-100",
    "bg-primary-200",
    "bg-primary-300",
    "bg-primary-400",
    "bg-primary-500",
    "bg-primary-600",
    "bg-primary-700",
    "bg-primary-800",
    "bg-primary-900",
    "bg-primary-950",
  ],
  success: [
    "bg-success-50",
    "bg-success-100",
    "bg-success-200",
    "bg-success-300",
    "bg-success-400",
    "bg-success-500",
    "bg-success-600",
    "bg-success-700",
    "bg-success-800",
    "bg-success-900",
    "bg-success-950",
  ],
  warning: [
    "bg-warning-50",
    "bg-warning-100",
    "bg-warning-200",
    "bg-warning-300",
    "bg-warning-400",
    "bg-warning-500",
    "bg-warning-600",
    "bg-warning-700",
    "bg-warning-800",
    "bg-warning-900",
    "bg-warning-1000",
  ],
  error: [
    "bg-error-50",
    "bg-error-100",
    "bg-error-200",
    "bg-error-300",
    "bg-error-400",
    "bg-error-500",
    "bg-error-600",
    "bg-error-700",
    "bg-error-800",
    "bg-error-900",
    "bg-error-950",
  ],
};

export const NeutralColors: Story = {
  render: () => (
    <div className="flex flex-wrap">
      {colorClasses.neutral.map((color) => (
        <ColorBox key={color} colorClass={color} label={color} />
      ))}
    </div>
  ),
};

export const PrimaryColors: Story = {
  render: () => (
    <div className="flex flex-wrap">
      {colorClasses.primary.map((color) => (
        <ColorBox key={color} colorClass={color} label={color} />
      ))}
    </div>
  ),
};

export const SuccessColors: Story = {
  render: () => (
    <div className="flex flex-wrap">
      {colorClasses.success.map((color) => (
        <ColorBox key={color} colorClass={color} label={color} />
      ))}
    </div>
  ),
};

export const WarningColors: Story = {
  render: () => (
    <div className="flex flex-wrap">
      {colorClasses.warning.map((color) => (
        <ColorBox key={color} colorClass={color} label={color} />
      ))}
    </div>
  ),
};

export const ErrorColors: Story = {
  render: () => (
    <div className="flex flex-wrap">
      {colorClasses.error.map((color) => (
        <ColorBox key={color} colorClass={color} label={color} />
      ))}
    </div>
  ),
};