import { Label, RadioGroup } from 'radix-ui'
import { Button } from '../ui/Button'

const envs = [
  { value: 'production', note: 'Borlänge DC' },
  { value: 'staging', note: 'Falun edge' },
]

const field =
  'h-10 w-full rounded-md border border-border bg-input px-3 text-sm transition-colors duration-200 placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-3 focus:ring-primary/15'

export default function FormDemo() {
  return (
    <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
      <div>
        <Label.Root htmlFor="app-name" className="text-sm font-medium">
          App name
        </Label.Root>
        <input id="app-name" className={`${field} mt-1.5 font-mono`} placeholder="case-intake-web" />
        <p className="mt-1.5 text-xs text-muted-foreground">Lowercase letters, digits and dashes.</p>
      </div>
      <RadioGroup.Root defaultValue="production" aria-label="Environment" className="grid grid-cols-2 gap-3">
        {envs.map(({ value, note }) => (
          <RadioGroup.Item
            key={value}
            value={value}
            className="rounded-lg border border-border p-3 text-left transition-colors duration-200 hover:border-foreground/25 data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
          >
            <span className="block text-sm font-medium capitalize">{value}</span>
            <span className="block text-xs text-muted-foreground">{note}</span>
          </RadioGroup.Item>
        ))}
      </RadioGroup.Root>
      <Button type="submit" variant="gradient" className="w-full">
        Create app
      </Button>
    </form>
  )
}