import React from 'react';
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
import { UnknownRecord } from '@/types';

type GeneralInfoProps = {
  profile: UnknownRecord | null;
};

const InfoLine: React.FC<{ label: string; value?: string }> = ({
  label,
  value,
}) => (
  <Text>
    <Text variant="b" weight="semibold">
      {label}:
    </Text>{' '}
    {value || '—'}
  </Text>
);

const GeneralInfo: React.FC<GeneralInfoProps> = ({ profile }) => {
  if (!profile) return null;

  return (
    <Text className="pro-right-box grid gap-1">
      <Heading level="h6" className="profile-username">
        {`${profile?.fname ?? ''} ${profile?.lname ?? ''}`}
      </Heading>
      <InfoLine label="Employee Id" value={profile?.employeeCode} />
      <InfoLine
        label="Designation"
        value={profile?.designation?.designation_name}
      />
    </Text>
  );
};

export default GeneralInfo;