import { jsx as _jsx } from "react/jsx-runtime";
import { ArrowRight, Download } from "lucide-react";
import { IconButton } from "../../IconButton";
import { CardHeader } from "../CardHeader";
const meta = {
    title: "Components/CardHeader",
    component: CardHeader,
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { CardHeader } from '@openuidev/react-ui';\n```",
            },
        },
    },
    decorators: [
        (Story) => (_jsx("div", { style: { width: "350px" }, children: _jsx(Story, {}) })),
    ],
    argTypes: {
        icon: {
            control: false,
            description: "The icon to display in the header beside the title",
            table: {
                category: "Content",
                type: { summary: "ReactNode" },
            },
        },
        title: {
            control: "text",
            description: "The title to display in the header",
            table: {
                category: "Content",
                type: { summary: "ReactNode" },
            },
        },
        subtitle: {
            control: "text",
            description: "The subtitle to display in the header",
            table: {
                category: "Content",
                type: { summary: "ReactNode" },
            },
        },
        actions: {
            control: false,
            description: "The actions to display in the header",
            table: {
                category: "Content",
                type: { summary: "ReactElement<ButtonProps | IconButtonProps>[]" },
            },
        },
        className: {
            control: false,
            description: "The class name to apply to the header",
            table: {
                category: "Styling",
                type: { summary: "string" },
            },
        },
        styles: {
            control: false,
            description: "Inline CSS styles for custom styling",
            table: {
                category: "Styling",
                type: { summary: "CSSProperties" },
            },
        },
    },
    tags: ["autodocs", "!dev"],
};
export default meta;
// Basic header stories
export const HeaderStory = {
    args: {
        icon: _jsx(ArrowRight, {}),
        title: "Thesys OpenUI",
        subtitle: "OpenUI UI is a set of React components.",
        actions: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: _jsx(Download, {}) })],
    },
    render: (args) => _jsx(CardHeader, { ...args }),
};
export const HeaderStoryWithMultipleActions = {
    parameters: {
        docs: {
            description: {
                story: "Passing multiple actions to the header. The actions are displayed in the right corner of the header.",
            },
        },
    },
    args: {
        icon: _jsx(ArrowRight, {}),
        title: "Thesys OpenUI",
        subtitle: "OpenUI UI is a set of React components.",
        actions: [
            _jsx(IconButton, { variant: "tertiary", size: "small", icon: _jsx(Download, {}) }),
            _jsx(IconButton, { variant: "tertiary", size: "small", icon: _jsx(Download, {}) }),
        ],
    },
    render: (args) => _jsx(CardHeader, { ...args }),
};
export const DefaultVariant = {
    parameters: {
        docs: {
            description: {
                story: "The default variant with larger text styling and 18px icon.",
            },
        },
    },
    args: {
        title: "Default Variant Header",
        subtitle: "This is the default variant with larger body text styling",
        actions: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: _jsx(Download, {}) })],
    },
    render: (args) => _jsx(CardHeader, { ...args }),
};
//# sourceMappingURL=cardHeader.stories.js.map