'use client';

import * as React from 'react';
import * as LabelPrimitives from '@radix-ui/react-label';
import { UtensilsCrossed } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Checkbox from '@/components/ui/checkbox';
import * as Divider from '@/components/ui/divider';
import * as Radio from '@/components/ui/radio';

export default function DietaryPreferenceRadio() {
  return (
    <div className='rounded-20 bg-bg-white-0 shadow-regular-md ring-stroke-soft-200 w-full max-w-[440px] ring-1 ring-inset'>
      <div className='flex items-center gap-3 px-5 py-4'>
        <UtensilsCrossed className='text-text-sub-600 size-6' />
        <div className='text-label-sm text-text-strong-950'>
          Choose your dietary preference
        </div>
      </div>

      <Divider.Root />

      <Radio.Group className='flex flex-col gap-3 p-5'>
        <div className='flex items-center gap-2'>
          <Radio.Item id='r1' value='r1' />
          <LabelPrimitives.Root
            htmlFor='r1'
            className='text-paragraph-sm text-text-strong-950 cursor-pointer'
          >
            Vegetarian
          </LabelPrimitives.Root>
        </div>

        <div className='flex items-center gap-2'>
          <Radio.Item id='r2' value='r2' />
          <LabelPrimitives.Root
            htmlFor='r2'
            className='text-paragraph-sm text-text-strong-950 cursor-pointer'
          >
            Non-vegetarian
          </LabelPrimitives.Root>
        </div>

        <div className='flex items-center gap-2'>
          <Radio.Item id='r3' value='r3' />
          <LabelPrimitives.Root
            htmlFor='r3'
            className='text-paragraph-sm text-text-strong-950 flex cursor-pointer items-center gap-1'
          >
            Vegan
            <span className='text-paragraph-xs text-text-sub-600'>
              (Gluten-free)
            </span>
          </LabelPrimitives.Root>
        </div>
      </Radio.Group>

      <Divider.Root />

      <div className='flex items-center justify-between px-5 py-4'>
        <div className='flex items-center gap-2'>
          <Checkbox.Root id='c1' />
          <LabelPrimitives.Root
            htmlFor='c1'
            className='text-paragraph-sm text-text-strong-950 cursor-pointer'
          >
            Set as default
          </LabelPrimitives.Root>
        </div>
        <Button.Root size='small'>Save Changes</Button.Root>
      </div>
    </div>
  );
}