'use client';

import {
  Apple as IconApple,
  Google as IconGoogle,
  Linkedin as IconLinkedin,
} from '@/components/misc/logo-icons';

import * as Checkbox from '@/components/ui/checkbox';
import * as Divider from '@/components/ui/divider';
import * as FancyButton from '@/components/ui/fancy-button';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import * as LinkButton from '@/components/ui/link-button';
import * as PasswordInput from '@/components/ui/password-input';
import * as SocialButton from '@/components/ui/social-button';

export default function MultiProviderLoginCard() {
  return (
    <div className='bg-bg-white-0 shadow-regular-xs flex w-full max-w-[400px] flex-col gap-5 rounded-3xl p-6'>
      <div className='flex flex-col items-center gap-5'>
        <img
          src='https://alignui.com/images/logo/apex.svg'
          alt=''
          className='size-14'
        />
        <div className='text-center'>
          <div className='text-title-h6 text-text-strong-950'>Welcome back</div>
          <div className='text-paragraph-sm text-text-sub-600'>
            Please enter your details to login.
          </div>
        </div>
      </div>

      <div className='grid grid-cols-3 gap-3'>
        <SocialButton.Root brand='apple' mode='stroke'>
          <SocialButton.Icon as={IconApple} />
        </SocialButton.Root>
        <SocialButton.Root brand='google' mode='stroke'>
          <SocialButton.Icon as={IconGoogle} />
        </SocialButton.Root>
        <SocialButton.Root brand='linkedin' mode='stroke'>
          <SocialButton.Icon as={IconLinkedin} />
        </SocialButton.Root>
      </div>

      <Divider.Root variant='line-text'>OR</Divider.Root>

      <div className='flex flex-col gap-3'>
        <div className='flex flex-col gap-1'>
          <Label.Root htmlFor='email'>Email Address</Label.Root>
          <Input.Root>
            <Input.Wrapper>
              <Input.Input
                id='email'
                type='email'
                placeholder='hello@alignui.com'
              />
            </Input.Wrapper>
          </Input.Root>
        </div>

        <div className='flex flex-col gap-1'>
          <div className='flex items-center justify-between'>
            <Label.Root htmlFor='password'>Password</Label.Root>
            <button type='button' className='text-label-xs text-text-sub-600'>
              Clear
            </button>
          </div>
          <PasswordInput.Root
            id='password'
            icon={null}
            placeholder='• • • • • • • • • • '
            visibilityIconClassName='text-text-soft-400 size-5'
          />
        </div>
      </div>

      <div className='flex items-center justify-between'>
        <div className='flex items-center gap-2'>
          <Checkbox.Root id='c1' />
          <Label.Root htmlFor='c1' className='text-paragraph-sm'>
            Remember me
          </Label.Root>
        </div>

        <LinkButton.Root variant='gray' size='medium'>
          Forgot?
        </LinkButton.Root>
      </div>

      <FancyButton.Root variant='primary' className='w-full'>
        Login
      </FancyButton.Root>

      <div className='text-paragraph-sm text-text-sub-600 flex items-baseline justify-center gap-1'>
        Don&apos;t have an account?
        <LinkButton.Root variant='black' size='medium'>
          Register
        </LinkButton.Root>
      </div>
    </div>
  );
}