import { Button } from './Button';
import { Stack } from '../Stack/Stack';

export function Variants() {
  return (
    <Stack direction="horizontal" gap="xs" align="center" wrap>
      <Button variant="primary">Save changes</Button>
      <Button variant="secondary">Cancel</Button>
      <Button variant="ghost">Learn more</Button>
      <Button variant="danger">Delete project</Button>
    </Stack>
  );
}

export function Sizes() {
  return (
    <Stack direction="horizontal" gap="xs" align="center">
      <Button size="sm" variant="primary">Small</Button>
      <Button size="md" variant="primary">Medium</Button>
      <Button size="lg" variant="primary">Large</Button>
    </Stack>
  );
}

export function States() {
  return (
    <Stack direction="horizontal" gap="xs" align="center">
      <Button variant="primary" loading>Saving</Button>
      <Button variant="secondary" disabled>Unavailable</Button>
      <Button
        variant="secondary"
        iconStart={
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M8 3v10M3 8h10" strokeLinecap="round" />
          </svg>
        }
      >
        New invoice
      </Button>
    </Stack>
  );
}

export function FullWidth() {
  return (
    <Stack gap="xs" style={{ maxWidth: 280 }}>
      <Button variant="primary" fullWidth>Continue</Button>
      <Button variant="ghost" fullWidth>Back</Button>
    </Stack>
  );
}