import React from 'react';
import Link from 'next/link';
import { Text } from '@/components/ui/text';
import { UnknownRecord } from '@/types';

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

const InfoLink: React.FC<{
  label: string;
  value?: string;
  hrefPrefix: 'mailto:' | 'tel:';
}> = ({ label, value, hrefPrefix }) => (
  <Text className={`${label.toLowerCase().replace(/\s/g, '-')}-strip`}>
    <Text className="pr-1" variant="b" weight="semibold">
      {label}:
    </Text>
    {value ? <Link href={`${hrefPrefix}${value}`}>{value}</Link> : '—'}
  </Text>
);

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

  return (
    <Text className="profile-user-pho-box">
      <InfoLink
        label="Official Email"
        value={profile.official_email || profile.personal_email}
        hrefPrefix="mailto:"
      />
      <InfoLink
        label="Official Phone"
        value={profile.mobile}
        hrefPrefix="tel:"
      />
    </Text>
  );
};

export default OfficialInfo;