import InputLabel from "../../app/components/type/InputLabel";
import {
  INPUT_LABEL_PALETTE_OPTIONS,
  INPUT_LABEL_SIZE_OPTIONS,
} from "../../lib/propNormalization";

export default {
  title: "Components/Type/InputLabel",
  component: InputLabel,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "Reusable form-input label with optional asterisk, help icon, and helper text. Figma Utility / InputLabel; canonical code under type/.",
      },
    },
  },
  argTypes: {
    label: { control: { type: "text" } },
    helpIcon: { control: { type: "boolean" } },
    asterisk: { control: { type: "boolean" } },
    helperText: { control: { type: "boolean" } },
    size: {
      control: { type: "select" },
      options: [...INPUT_LABEL_SIZE_OPTIONS],
    },
    palette: {
      control: { type: "select" },
      options: [...INPUT_LABEL_PALETTE_OPTIONS],
    },
  },
};

export const Default = {
  args: {
    label: "Community name",
    size: "s",
    palette: "default",
  },
};

export const Required = {
  args: {
    label: "Community name",
    asterisk: true,
    size: "s",
    palette: "default",
  },
};

export const WithHelp = {
  args: {
    label: "Applicable scope",
    helpIcon: true,
    size: "m",
    palette: "default",
  },
};

export const OptionalHelper = {
  args: {
    label: "Website",
    helperText: true,
    size: "s",
    palette: "default",
  },
};

export const Inverse = {
  args: {
    label: "Community name",
    asterisk: true,
    size: "m",
    palette: "inverse",
  },
};
