import { Button, HStack, Text, VStack } from '@cdx-ui/components';
import { SECTION_LABEL } from './data';

export function ButtonVariantsShowcase() {
  return (
    <VStack className="gap-2">
      <Text className={SECTION_LABEL}>Button variants</Text>
      <VStack className="gap-2 flex-wrap">
        <Text size="xs" className="font-medium tracking-widest text-content-tertiary">
          Action
        </Text>
        <HStack className="gap-2">
          <Button color="action" variant="solid" size="default">
            <Button.Label>Solid</Button.Label>
          </Button>
          <Button color="action" variant="outline" size="default">
            <Button.Label>Outline</Button.Label>
          </Button>
          <Button color="action" variant="ghost" size="default">
            <Button.Label>Ghost</Button.Label>
          </Button>
        </HStack>
        <Text size="xs" className="font-medium tracking-widest text-content-tertiary">
          Danger
        </Text>
        <HStack className="gap-2">
          <Button color="danger" variant="solid" size="default">
            <Button.Label>Solid</Button.Label>
          </Button>
          <Button color="danger" variant="outline" size="default">
            <Button.Label>Outline</Button.Label>
          </Button>
          <Button color="danger" variant="ghost" size="default">
            <Button.Label>Ghost</Button.Label>
          </Button>
        </HStack>
      </VStack>
    </VStack>
  );
}