Card Select

import { Meta, StoryObj } from '@storybook/react-vite';

import { CardSelect } from './CardSelect';

const OPTIONS = [
	{
		children: 'For personal projects and experimentation.',
		label: 'Starter',
		value: 'starter',
	},
	{
		children: 'For production sites with higher traffic needs.',
		label: 'Professional',
		value: 'professional',
	},
	{
		children: 'For teams that need advanced controls and support.',
		label: 'Enterprise',
		value: 'enterprise',
	},
];

const meta: Meta<typeof CardSelect> = {
	tags: ['in-progress', 'new-pattern'],
	title: 'Component Proposals/Card Select',
	component: CardSelect,
	parameters: {
		docs: {
			description: {
				component:
					'Proposal, based on the PDS Card Select, with a `shadow` prop. `shadow={true}` (default) is the unchanged PDS look. `shadow={false}` removes the drop shadow: an unselected card has a border in the input border color, a hovered card gets a background tint, and the selected card is marked by the check indicator, or by the focus ring when `showIndicator` is `false`.',
			},
		},
	},
	argTypes: {
		background: {
			control: { type: 'select' },
			options: ['default', 'secondary', 'transparent'],
			table: { category: 'Appearance' },
		},
		className: { table: { category: 'Base attributes' } },
		defaultValue: { table: { category: 'Content' } },
		id: { table: { category: 'Base attributes' } },
		imageVariant: {
			control: { type: 'select' },
			options: ['bleed', 'inset'],
			table: { category: 'Appearance' },
		},
		label: { table: { category: 'Content' } },
		labelDisplay: {
			control: { type: 'select' },
			options: ['left', 'center', 'hidden'],
			table: { category: 'Layout' },
		},
		layout: {
			control: { type: 'select' },
			options: ['auto', 'twoAcross', 'threeAcross'],
			table: { category: 'Layout' },
		},
		onChange: { table: { category: 'Component configuration' } },
		options: { control: 'object', table: { category: 'Content' } },
		padding: {
			control: { type: 'select' },
			options: ['condensed', 'standard', 'spacious'],
			table: { category: 'Appearance' },
		},
		shadow: { control: 'boolean', table: { category: 'Appearance' } },
		showCardLabels: { table: { category: 'Component configuration' } },
		showIndicator: { table: { category: 'Component configuration' } },
		size: {
			control: 'inline-radio',
			options: ['m', 'l'],
			table: { category: 'Component configuration' },
		},
	},
	args: {
		defaultValue: 'professional',
		id: 'card-select-default',
		label: 'Choose a plan',
		options: OPTIONS,
		shadow: true,
	},
};

export default meta;

type Story = StoryObj<typeof meta>;

export const WithShadow: Story = {
	args: { id: 'card-select-with-shadow' },
	parameters: {
		docs: {
			description: {
				story:
					'`shadow={true}` (default): the unchanged PDS Card Select, with the raised shadow, deeper on hover.',
			},
		},
	},
};

export const WithoutShadow: Story = {
	args: { id: 'card-select-without-shadow', shadow: false },
	parameters: {
		docs: {
			description: {
				story:
					'`shadow={false}`: an unselected card has a border in the input border color. Hover tints the background like a secondary Button. The selected card is marked by the check indicator only; its border stays the input color.',
			},
		},
	},
};

export const WithoutShadowOrIndicator: Story = {
	args: {
		id: 'card-select-without-shadow-or-indicator',
		shadow: false,
		showIndicator: false,
	},
	parameters: {
		docs: {
			description: {
				story:
					'`shadow={false}` with `showIndicator={false}`: the focus ring is the only selected-state mark.',
			},
		},
	},
};

export const WithoutShadowLarge: Story = {
	args: { id: 'card-select-without-shadow-large', shadow: false, size: 'l' },
};