import { Button } from '@luke-ui/react/button';
import { Stack } from '@luke-ui/react/stack';
import { Text } from '@luke-ui/react/text';
import { Comparison, ComparisonItem } from '#docs';

export default () => {
	return (
		<Stack gap="sp24">
			<Stack gap="sp8">
				<Text typography="label">Button</Text>
				<Comparison>
					<ComparisonItem label="Neutral · Low">
						<Button prominence="low">Button</Button>
					</ComparisonItem>
					<ComparisonItem label="Neutral · Standard">
						<Button>Button</Button>
					</ComparisonItem>
					<ComparisonItem label="Neutral · High">
						<Button prominence="high">Button</Button>
					</ComparisonItem>
					<ComparisonItem label="Critical · Low">
						<Button prominence="low" tone="critical">
							Button
						</Button>
					</ComparisonItem>
					<ComparisonItem label="Critical · Standard">
						<Button tone="critical">Button</Button>
					</ComparisonItem>
					<ComparisonItem label="Critical · High">
						<Button prominence="high" tone="critical">
							Button
						</Button>
					</ComparisonItem>
				</Comparison>
			</Stack>
			<Stack gap="sp8">
				<Text typography="label">Text</Text>
				<Comparison>
					<ComparisonItem label="Neutral · Low">
						<Button appearance="text" prominence="low">
							Button
						</Button>
					</ComparisonItem>
					<ComparisonItem label="Neutral · Standard">
						<Button appearance="text">Button</Button>
					</ComparisonItem>
					<ComparisonItem label="Neutral · High">
						<Button appearance="text" prominence="high">
							Button
						</Button>
					</ComparisonItem>
					<ComparisonItem label="Critical · Low">
						<Button appearance="text" prominence="low" tone="critical">
							Button
						</Button>
					</ComparisonItem>
					<ComparisonItem label="Critical · Standard">
						<Button appearance="text" tone="critical">
							Button
						</Button>
					</ComparisonItem>
				</Comparison>
			</Stack>
		</Stack>
	);
};