'use client';

import { Copy, Link2 } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Checkbox from '@/components/ui/checkbox';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import { cn } from '@/utils/cn';

function InputWithButton() {
  return (
    <div className='w-full'>
      <Input.Root>
        <Input.Wrapper>
          <Input.Icon as={Link2} />
          <Input.Input value='https://meet.example.com/abc-def-ghi' />
        </Input.Wrapper>
        <button
          type='button'
          className={cn(
            'text-label-sm text-text-sub-600 inline-flex h-10 items-center justify-center gap-3 rounded-none bg-transparent px-3.5 ring-1 ring-transparent transition duration-200 ease-out outline-none ring-inset',
            'hover:bg-bg-weak-50 hover:text-text-strong-950',
            'focus-visible:bg-bg-weak-50 focus-visible:text-text-strong-950 focus-visible:ring-transparent',
          )}
        >
          <Copy className='-mx-1 size-5 shrink-0' />
        </button>
      </Input.Root>
    </div>
  );
}

export default function MeetingLinkCheckbox() {
  return (
    <div className='rounded-20 bg-bg-white-0 shadow-custom-sm flex w-full max-w-[428px] flex-col gap-5 p-5'>
      <div>
        <div className='text-label-md text-text-strong-950'>
          Generate meeting link
        </div>
        <div className='text-label-sm text-text-sub-600 mt-1'>
          Link is one-time only, copy before closing.
        </div>
      </div>

      <div>
        <InputWithButton />
        <div className='mt-3 flex items-center gap-2'>
          <Checkbox.Root id='c1' defaultChecked />
          <Label.Root className='text-paragraph-sm' htmlFor='c1'>
            I have saved the meeting link.
          </Label.Root>
        </div>
      </div>

      <div className='grid grid-cols-2 gap-3'>
        <Button.Root variant='neutral' mode='stroke' size='small'>
          Create new link
        </Button.Root>
        <Button.Root variant='neutral' mode='filled' size='small'>
          Complete
        </Button.Root>
      </div>
    </div>
  );
}