'use client';

import * as React from 'react';
import { Plus, Globe, Mail, Briefcase } from 'lucide-react';

import * as Avatar from '@/components/ui/avatar';
import * as Button from '@/components/ui/button';
import * as CompactButton from '@/components/ui/compact-button';
import * as Divider from '@/components/ui/divider';
import * as LinkButton from '@/components/ui/link-button';

export default function ContactInformationCard() {
  return (
    <div className='rounded-20 bg-bg-white-0 shadow-regular-md w-full max-w-[400px]'>
      <div className='flex flex-col gap-4 p-4'>
        <div className='flex items-center justify-between'>
          <div className='text-label-sm text-text-sub-600'>
            Contact Information
          </div>
          <LinkButton.Root variant='primary' size='medium'>
            View Profile
          </LinkButton.Root>
        </div>
        <div className='bg-bg-white-0 ring-stroke-soft-200 flex items-center gap-3.5 rounded-xl p-3.5 ring-1 ring-inset'>
          <Avatar.Root size='48' color='blue'>
            <Avatar.Image src='https://alignui.com/images/avatar/photo/lena.png' />
          </Avatar.Root>
          <div className='flex-1'>
            <div className='text-label-md text-text-strong-950'>
              Lena Müller
            </div>
            <div className='text-paragraph-sm text-text-sub-600 mt-1'>
              Marketing Manager{' '}
              <span className='text-text-strong-950 font-medium'>
                @catalyst
              </span>
            </div>
          </div>
          <CompactButton.Root variant='stroke' size='large'>
            <CompactButton.Icon as={Plus} />
          </CompactButton.Root>
        </div>

        <div className='flex items-center gap-3'>
          <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
            <Globe className='text-text-sub-600 size-5' />
          </div>
          <div>
            <div className='text-subheading-xs text-text-soft-400'>
              LOCATION
            </div>
            <div className='text-paragraph-sm text-text-strong-950 mt-1'>
              Berlin, Germany
            </div>
          </div>
        </div>

        <div className='flex items-center gap-3'>
          <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
            <Briefcase className='text-text-sub-600 size-5' />
          </div>
          <div>
            <div className='text-subheading-xs text-text-soft-400'>
              SPECIALITY
            </div>
            <div className='text-paragraph-sm text-text-strong-950 mt-1'>
              Marketing, SEO, Team Leader
            </div>
          </div>
        </div>

        <div className='flex items-center gap-3'>
          <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
            <Mail className='text-text-sub-600 size-5' />
          </div>
          <div>
            <div className='text-subheading-xs text-text-soft-400'>
              EMAIL ADDRESS
            </div>
            <div className='text-paragraph-sm text-text-strong-950 mt-1'>
              lena@alignui.com
            </div>
          </div>
        </div>
      </div>

      <Divider.Root />

      <div className='flex gap-3 px-5 py-4'>
        <Button.Root
          variant='neutral'
          mode='stroke'
          size='small'
          className='w-full'
        >
          Add Contact
        </Button.Root>
        <Button.Root size='small' className='w-full'>
          Send Message
        </Button.Root>
      </div>
    </div>
  );
}