'use client';

import { Linkedin as IconLinkedin } from '@/components/misc/logo-icons';

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 LinkedinSignupCard() {
  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/aurora.svg'
          alt=''
          className='size-14'
        />
        <div className='text-center'>
          <div className='text-title-h6 text-text-strong-950'>
            Create an account
          </div>
          <div className='text-paragraph-sm text-text-sub-600'>
            Please enter your details to create an account.
          </div>
        </div>
      </div>
      <SocialButton.Root brand='linkedin' mode='stroke' className='w-full'>
        <SocialButton.Icon as={IconLinkedin} />
        Continue with LinkedIn
      </SocialButton.Root>

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

      <div className='flex flex-col gap-3'>
        <div className='flex gap-4'>
          <div className='flex flex-col gap-1'>
            <Label.Root htmlFor='first-name'>First Name</Label.Root>
            <Input.Root>
              <Input.Wrapper>
                <Input.Input id='first-name' placeholder='James' />
              </Input.Wrapper>
            </Input.Root>
          </div>
          <div className='flex flex-col gap-1'>
            <Label.Root htmlFor='last-name'>Last Name</Label.Root>
            <Input.Root>
              <Input.Wrapper>
                <Input.Input id='last-name' placeholder='Brown' />
              </Input.Wrapper>
            </Input.Root>
          </div>
        </div>

        <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>

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

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