import { Button } from '@repo/ui/components/ui/button'
import { Label } from '@repo/ui/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@repo/ui/components/ui/radio-group'
import { Separator } from '@repo/ui/components/ui/separator'

export function Payment() {
  return (
    <>
      <RadioGroup
        defaultValue="comfortable"
        className="lg:flex *:p-5 *:border *:rounded-xl *:flex-1 *:cursor-pointer
                 *:bg-accent/25 *:has-[button[data-state=checked]]:bg-accent"
      >
        <Label>
          <RadioGroupItem value="default" id="r1" />
          <span>Pix</span>
        </Label>
        <Label>
          <RadioGroupItem value="comfortable" id="r2" />
          <span>Boleto bancário</span>
        </Label>
        <Label>
          <RadioGroupItem value="compact" id="r3" />
          <span>Cartão de crédito</span>
        </Label>
      </RadioGroup>

      <Separator />

      <div className="flex justify-end">
        <Button
          type="submit"
          className="cursor-pointer"
          // disabled={formState.isSubmitting}
        >
          {/*{formState.isSubmitting && <Spinner />}*/}
          Continuar
        </Button>
      </div>
    </>
  )
}