'use client';

import * as React from 'react';
import { Plus, UserPlus } from 'lucide-react';

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

export default function NetworkProfileCard() {
  return (
    <div className='rounded-20 bg-bg-white-0 shadow-regular-md w-full max-w-[400px]'>
      <div className='flex flex-col items-center gap-4 p-6'>
        <Avatar.Root size='64' color='blue'>
          <Avatar.Image src='https://alignui.com/images/avatar/photo/arthur.png' />
          <Avatar.Indicator position='bottom'>
            <Avatar.BrandLogo src='https://alignui.com/images/logo/apex.svg' />
          </Avatar.Indicator>
        </Avatar.Root>
        <div className='text-center'>
          <div className='text-label-lg text-text-strong-950'>
            Arthur Taylor
          </div>
          <div className='text-paragraph-sm text-text-sub-600 mt-1'>
            Entrepreneur / CEO at Apex
          </div>
        </div>
      </div>
      <Divider.Root />
      <div className='flex items-center gap-4 px-5 py-4'>
        <div className='flex-1'>
          <div className='text-paragraph-xs text-text-sub-600'>Contacts</div>
          <div className='text-label-sm text-text-strong-950 mt-1'>
            Expand Your Network
          </div>
        </div>
        <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-9 shrink-0 items-center justify-center rounded-lg ring-1 ring-inset'>
          <UserPlus className='text-text-sub-600 size-5' />
        </div>
      </div>
      <Divider.Root />
      <div className='px-5 py-4'>
        <div className='text-paragraph-xs text-text-sub-600'>
          Premium Features
        </div>
        <LinkButton.Root
          variant='black'
          size='medium'
          underline
          className='mt-1 flex'
        >
          {'Get "Profile Highlighting" feature.'}
        </LinkButton.Root>
      </div>
      <Divider.Root />
      <div className='px-5 py-4'>
        <Button.Root
          variant='neutral'
          mode='stroke'
          size='small'
          className='w-full'
        >
          <Button.Icon as={Plus} />
          Create a group
        </Button.Root>
      </div>
    </div>
  );
}