'use client';

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

import * as Checkbox from '@/components/ui/checkbox';
import * as Divider from '@/components/ui/divider';
import * as Label from '@/components/ui/label';
import * as LinkButton from '@/components/ui/link-button';

export default function AuthenticationSettingsCheckboxes() {
  return (
    <div className='rounded-20 bg-bg-white-0 shadow-regular-md ring-stroke-soft-200 flex w-full max-w-[440px] flex-col gap-5 p-5 ring-1 ring-inset'>
      <div className='flex items-center gap-3.5'>
        <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'>
          <Settings className='text-text-sub-600 size-5' />
        </div>
        <div>
          <div className='text-label-sm text-text-strong-950'>
            Authentication Settings
          </div>
          <div className='text-paragraph-xs text-text-sub-600 mt-1'>
            Edit your preferences for authentication settings.
          </div>
        </div>
      </div>

      <Divider.Root variant='line-spacing' />

      <div className='flex flex-col gap-3'>
        <div className='text-label-sm text-text-strong-950'>
          Two-Factor Authentication
        </div>
        <div className='flex items-center gap-2'>
          <Checkbox.Root id='c1' />
          <Label.Root className='text-paragraph-sm' htmlFor='c1'>
            SMS Verification
          </Label.Root>
        </div>
        <div className='flex items-center gap-2'>
          <Checkbox.Root id='c2' />
          <Label.Root className='text-paragraph-sm' htmlFor='c2'>
            Authenticator App
          </Label.Root>
        </div>
      </div>

      <Divider.Root variant='line-spacing' />

      <div>
        <div className='text-label-sm text-text-strong-950'>
          Password Strength
        </div>
        <div className='text-paragraph-sm text-text-sub-600 mt-2'>
          For enhanced security measures, it is highly recommended to
          consistently create and utilize strong, well-generated passwords.
        </div>
      </div>

      <Divider.Root variant='line-spacing' />

      <div>
        <div className='text-label-sm text-text-strong-950'>
          Allowing Apex to Protect Your Data
        </div>
        <div className='text-paragraph-sm text-text-sub-600 mt-2'>
          To learn more about how Apex protects your data{' '}
          <LinkButton.Root variant='primary' size='medium' underline>
            Read Privacy Policy
          </LinkButton.Root>
        </div>
      </div>
    </div>
  );
}