import { useState } from 'react';
import { Radio, RadioGroup } from './Radio';

export function Basic() {
  return (
    <RadioGroup name="visibility" label="Project visibility" hint="You can change this later.">
      <Radio name="visibility" value="private" label="Private" defaultChecked />
      <Radio name="visibility" value="team" label="Team" />
      <Radio name="visibility" value="public" label="Public" />
    </RadioGroup>
  );
}

export function WithDescriptions() {
  const [value, setValue] = useState('weekly');
  return (
    <RadioGroup name="billing" label="Billing period">
      <Radio
        name="billing"
        value="monthly"
        label="Monthly"
        description="Pay as you go, cancel any time."
        checked={value === 'monthly'}
        onChange={(event) => setValue(event.target.value)}
      />
      <Radio
        name="billing"
        value="weekly"
        label="Weekly"
        description="Best for short-lived projects."
        checked={value === 'weekly'}
        onChange={(event) => setValue(event.target.value)}
      />
      <Radio
        name="billing"
        value="yearly"
        label="Yearly"
        description="Two months free."
        checked={value === 'yearly'}
        onChange={(event) => setValue(event.target.value)}
      />
    </RadioGroup>
  );
}

export function Horizontal() {
  return (
    <RadioGroup
      name="env"
      label="Environment"
      direction="horizontal"
      error="Choose an environment to deploy to."
    >
      <Radio name="env" value="prod" label="Production" invalid />
      <Radio name="env" value="staging" label="Staging" invalid />
      <Radio name="env" value="preview" label="Preview" invalid />
    </RadioGroup>
  );
}