Icon: agentic icons

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

import { Icon } from './Icon';

const SIZES: IconSize[] = ['xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl'];

const AGENTIC_ICONS = [
	{ iconName: 'zappy', name: 'Zappy (PDS agents)' },
	{ iconName: 'sparklesSolid', name: 'Sparkles (other agents)' },
] as const;

const meta: Meta<typeof Icon> = {
	title: 'Proposals/Icon',
	component: Icon,
	parameters: {
		docs: {
			description: {
				component:
					'Agentic icons. `zappy` marks PDS agents; `sparklesSolid` marks other (third-party) agents.',
			},
		},
	},
	argTypes: {
		className: { table: { category: 'Base attributes' } },
		iconName: {
			control: 'select',
			options: ['zappy', 'sparklesSolid'],
			table: { category: 'Component configuration' },
		},
		size: {
			control: 'select',
			options: SIZES,
			table: { category: 'Component configuration' },
		},
	},
	args: {
		iconName: 'zappy',
		size: '4xl',
	},
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const AllSizes: Story = {
	parameters: {
		docs: {
			description: {
				story:
					'Both agentic icons at every size, `xs` to `4xl`. They take `currentColor`, so they follow the text color in light and dark.',
			},
		},
	},
	render: () => (
		<FlexContainer flexDirection='column' gap='m'>
			{AGENTIC_ICONS.map(({ iconName, name }) => (
				<FlexContainer alignItems='center' gap='m' key={iconName}>
					<span style={{ width: '14rem' }}>{name}</span>
					{SIZES.map((size) => (
						<Icon iconName={iconName} key={size} size={size} />
					))}
				</FlexContainer>
			))}
		</FlexContainer>
	),
};