'use client';

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

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

export default function ReportMessageRadio() {
  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.5 px-5 py-4'>
        <div className='bg-bg-white-0 ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
          <Flag className='text-text-sub-600 size-5' />
        </div>
        <div>
          <div className='text-label-sm text-text-strong-950'>
            Report Message
          </div>
          <div className='text-paragraph-xs text-text-sub-600 mt-1'>
            Select the reason for reporting the message.
          </div>
        </div>
      </div>

      <Divider.Root />

      <Radio.Group className='flex flex-col gap-5 p-5'>
        <div className='flex items-start gap-2'>
          <Radio.Item id='r1' value='r1' />
          <LabelPrimitives.Root htmlFor='r1' className='cursor-pointer'>
            <div className='text-label-sm text-text-strong-950'>Spam</div>
            <div className='text-paragraph-xs text-text-sub-600 mt-1'>
              Unsolicited or irrelevant content.
            </div>
          </LabelPrimitives.Root>
        </div>

        <div className='flex items-start gap-2'>
          <Radio.Item id='r2' value='r2' />
          <LabelPrimitives.Root htmlFor='r2' className='cursor-pointer'>
            <div className='text-label-sm text-text-strong-950'>
              Harrassment
            </div>
            <div className='text-paragraph-xs text-text-sub-600 mt-1'>
              Persistent, unwanted, or offensive behavior.
            </div>
          </LabelPrimitives.Root>
        </div>

        <div className='flex items-start gap-2'>
          <Radio.Item id='r3' value='r3' />
          <LabelPrimitives.Root htmlFor='r3' className='cursor-pointer'>
            <div className='text-label-sm text-text-strong-950'>
              Violation of Rules
            </div>
            <div className='text-paragraph-xs text-text-sub-600 mt-1'>
              Infringement of community guidelines or terms.
            </div>
          </LabelPrimitives.Root>
        </div>
      </Radio.Group>

      <Divider.Root />

      <div className='grid grid-cols-2 gap-3 px-5 py-4'>
        <Button.Root variant='neutral' mode='stroke' size='small'>
          Cancel
        </Button.Root>
        <Button.Root size='small'>Submit</Button.Root>
      </div>
    </div>
  );
}