import React from 'react';
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
import { DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { UnknownRecord } from '@/types';
import AsyncImage from '@/components/common/AsyncImage';

type UserHeaderCardProps = {
  profile: UnknownRecord | null;
  displayPicture?: string;
};

const HeaderCard: React.FC<UserHeaderCardProps> = ({
  profile,
  displayPicture = '',
}) => {
  const fullName = `${profile?.fname ?? ''} ${profile?.lname ?? ''}`;

  return (
    <DropdownMenuTrigger asChild>
      <Text className="admin-user-name user-menu flex items-center gap-2">
        <Text className="user-dp-header">
          <AsyncImage
            src={displayPicture}
            fallback="/header/no-image.png"
            directory="employees"
            classname="userDp"
            alt={fullName}
            width={30}
            height={30}
          />
        </Text>
        <div className="name-title">
          <Heading level="h3" className="profile-username">
            {profile?.fname ?? '—'}
          </Heading>
          <div className="user-id">
            <span>Employee Id:</span> {profile?.employeeCode ?? '—'}
          </div>
        </div>
      </Text>
    </DropdownMenuTrigger>
  );
};

export default HeaderCard;