import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "./icon.js";
import { iconNames } from "../icon-components/index.js";
const meta = {
    title: "Powerhouse/Components/Icon",
    component: Icon,
    parameters: {
        layout: "centered",
    },
};
export default meta;
export const AllIcons = {
    args: {
        name: "Circle",
    },
    render: () => {
        return (_jsxs("div", { className: "bg-white p-8", children: [_jsx("h2", { className: "mb-6 text-xl font-semibold", children: "All Available Icons" }), _jsx("div", { className: "flex flex-wrap", children: iconNames.map((name) => (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4", children: [_jsx("div", { className: "flex size-10 items-center justify-center", children: _jsx(Icon, { name: name, className: "text-gray-700" }) }), _jsx("span", { className: "text-xs text-gray-600", children: name })] }, name))) })] }));
    },
};
export const CustomColor = {
    args: {
        name: "Circle",
        color: "blue",
    },
};
export const CustomSize = {
    args: {
        name: "Circle",
        size: 48,
    },
};
export const SingleIcon = {
    args: {
        name: "Circle",
    },
};
//# sourceMappingURL=icon.stories.js.map