Milestone

import { ReactNode } from 'react';

import type { MilestoneVariant } from './Milestone';

import './milestone-list.stories.css';

const variants: Array<{ label: string; variant: MilestoneVariant }> = [
	{ label: 'Card', variant: 'card' },
	{ label: 'Flat', variant: 'flat' },
];

interface MilestoneVariantsExampleProps {
	/**
	 * Renders the example once per variant.
	 */
	children: (variant: MilestoneVariant) => ReactNode;
}

/**
 * Story-only. Shows an example on cards and flat, one above the other, so
 * both are visible at once. Not part of the proposal.
 */
export const MilestoneVariantsExample = ({
	children,
}: MilestoneVariantsExampleProps) => (
	<div className='milestone-example__variants'>
		{variants.map(({ label, variant }) => (
			<div key={variant}>
				<p className='pds-copy-s milestone-example__label'>{label}</p>
				{children(variant)}
			</div>
		))}
	</div>
);