Badge

import { FlexContainer } from '@pantheon-systems/pds-toolkit-react';
import { Meta, StoryObj } from '@storybook/react-vite';

import { Badge, BadgeProps } from './Badge';

const meta: Meta<typeof Badge> = {
	tags: ['ready-for-dev'],
	title: 'Component Proposals/Badge',
	component: Badge,
	parameters: {
		docs: {
			description: {
				component:
					'A copy of the PDS v2 Badge: a visual label that indicates a special designation or category.',
			},
		},
	},
	argTypes: {
		className: {
			table: {
				category: 'Base attributes',
			},
		},
		color: {
			control: 'select',
			table: {
				category: 'Appearance',
			},
		},
		iconName: {
			control: 'select',
			options: ['zappy', 'sparklesSolid'],
			table: {
				category: 'Content',
			},
		},
		label: {
			table: {
				category: 'Content',
			},
		},
		size: {
			control: 'select',
			table: {
				category: 'Component configuration',
			},
		},
	},
	args: {},
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Agentic: Story = {
	parameters: {
		docs: {
			description: {
				story:
					'Animated gradient fill signaling that an AI assistant is active. Respects `prefers-reduced-motion: reduce`.',
			},
		},
	},
	args: {
		color: 'ai-active',
		iconName: 'zappy',
		label: 'Zappy',
		size: 's',
	},
};

export const AllSizesWithIcons: Story = {
	parameters: {
		docs: {
			description: {
				story:
					'Pass `iconName` to show a leading icon. It is sized to fit the badge `size` and colored to match its foreground. `zappy` is for Pantheon agents and `sparklesSolid` for third-party agents.',
			},
		},
	},
	render: () => {
		const rows: Array<Pick<BadgeProps, 'iconName' | 'label'>> = [
			{ iconName: 'zappy', label: 'Zappy' },
			{ iconName: 'sparklesSolid', label: 'AI agent' },
		];
		const sizes: Array<BadgeProps['size']> = ['xs', 's', 'm'];

		return (
			<FlexContainer flexDirection='column' gap='m'>
				{rows.map(({ iconName, label }) => (
					<FlexContainer key={iconName} gap='m'>
						{sizes.map((size) => (
							<Badge
								key={size}
								color='ai-active'
								iconName={iconName}
								label={label}
								size={size}
							/>
						))}
					</FlexContainer>
				))}
			</FlexContainer>
		);
	},
};