'use client';

import * as React from 'react';
import { MailCheck } from 'lucide-react';

import * as DigitInput from '@/components/ui/digit-input';
import * as Divider from '@/components/ui/divider';
import * as FancyButton from '@/components/ui/fancy-button';
import * as LinkButton from '@/components/ui/link-button';
import { cn } from '@/utils/cn';

export default function VerificationCodeCard() {
  const [digitInputValue, setDigitInputValue] = React.useState('');

  return (
    <div className='rounded-20 bg-bg-white-0 flex w-full max-w-[440px] flex-col gap-6 p-5 md:p-8'>
      <div className='flex flex-col items-center gap-2'>
        {/* icon */}
        <div
          className={cn(
            'relative flex size-[68px] shrink-0 items-center justify-center rounded-full backdrop-blur-xl md:size-24',
            // bg
            'before:absolute before:inset-0 before:rounded-full',
            'before:bg-gradient-to-b before:from-neutral-500 before:to-transparent before:opacity-10',
          )}
        >
          <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 relative z-10 flex size-12 items-center justify-center rounded-full ring-1 ring-inset md:size-16'>
            <MailCheck className='text-text-sub-600 size-6 md:size-8' />
          </div>
        </div>

        <div className='space-y-1 text-center'>
          <div className='text-title-h6 text-text-strong-950 md:text-title-h5'>
            Enter Verification Code
          </div>
          <div className='text-paragraph-sm text-text-sub-600 md:text-paragraph-md'>
            We’ve sent a code to{' '}
            <span className='text-text-strong-950 font-medium'>
              arthur@alignui.com
            </span>
          </div>
        </div>
      </div>

      <Divider.Root />

      <DigitInput.Root
        numInputs={4}
        onChange={(value) => setDigitInputValue(value)}
        value={digitInputValue}
      />

      <FancyButton.Root variant='primary' size='medium'>
        Submit Code
      </FancyButton.Root>

      <div className='text-paragraph-sm text-text-sub-600 flex flex-col items-center gap-1 text-center'>
        Experiencing issues receiving the code?
        <LinkButton.Root variant='black' size='medium' underline>
          Resend code
        </LinkButton.Root>
      </div>
    </div>
  );
}