'use client';

import * as React from 'react';

import * as Avatar from '@/components/ui/avatar';
import * as Button from '@/components/ui/button';

export default function CompactProfileCard() {
  return (
    <div className='rounded-20 bg-bg-white-0 shadow-regular-md flex w-full max-w-[340px] flex-col items-center gap-4 p-5'>
      <Avatar.Root size='64' color='gray'>
        <Avatar.Image src='https://alignui.com/images/avatar/photo/wei.png' />
        <Avatar.Indicator>
          <Avatar.Status status='online' />
        </Avatar.Indicator>
      </Avatar.Root>

      <div className='text-center'>
        <div className='text-label-md text-text-strong-950'>Wei Chen</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>

      <Button.Root variant='neutral' mode='stroke' size='small'>
        Add Contact
      </Button.Root>
    </div>
  );
}