import { jsx as _jsx } from "react/jsx-runtime";
import { Stack, useTheme } from '@mui/material';
import HumandLogo from '.';
const meta = {
    component: HumandLogo,
    title: 'Design System/HumandLogo',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'Humand brand logo as an inline SVG. Defaults to a theme-aware brand color (navy in light mode, white in dark mode). Override via `style.color`. Pass `title` for an accessible label; otherwise it is rendered as decorative.',
            },
        },
    },
    argTypes: {
        title: {
            control: 'text',
            description: 'Accessible label. When omitted, the SVG is decorative.',
        },
    },
    args: {
        title: 'Humand',
        style: { width: 240 },
    },
};
export default meta;
export const Default = {};
/**
 * Exercises the component's built-in dark-mode logic by switching the
 * Storybook global `themeMode` to `dark`. The logo should render white
 * automatically — no `style.color` override needed.
 */
export const DarkMode = {
    globals: {
        themeMode: 'dark',
    },
};
const WhiteOnDarkBackgroundRenderer = (args) => {
    const theme = useTheme();
    return (_jsx(Stack, { sx: {
            p: 4,
            backgroundColor: theme.palette.newBase?.brand?.[950],
            alignItems: 'flex-start',
        }, children: _jsx(HumandLogo, { ...args, style: { ...args.style, color: theme.palette.newBase?.white } }) }));
};
/**
 * Demonstrates manually overriding the color via `style.color` while the
 * surrounding theme stays in light mode. Useful when placing the logo on a
 * locally-dark surface inside an otherwise light page.
 */
export const WhiteOnDarkBackground = {
    render: args => _jsx(WhiteOnDarkBackgroundRenderer, { ...args }),
};
export const CustomColor = {
    args: {
        style: { width: 240, color: '#E74444' },
    },
};
