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

const meta: Meta<typeof SvgUse> = {
  title: "base/shared/SvgUse",
  component: SvgUse,
  argTypes: {
    icon: {
      control: "text", // allow typing any string
      description: "ID of the icon inside the sprite (e.g., 'home-solid' or any custom ID).",
    },
    path: {
      control: "text",
      description: "Path to the SVG sprite (default: '/svg/public.svg').",
    },
    className: {
      control: "text",
      description: "Custom class names for styling the SVG.",
    },
    "aria-label": {
      control: "text",
      description: "Accessibility label for screen readers.",
    },
  },
  args: {
    icon: "home-solid",
    path: "/svg/public.svg",
    className: "size-8 text-blue-500",
    "aria-label": "Home Icon",
  },
  tags: ["autodocs"],
}

export default meta

type Story = StoryObj<typeof SvgUse>

export const Default: Story = {
  render: args => <SvgUse {...args} />,
}