import React from 'react';
import { Text } from '@/components/ui/text';
import { IBranch, IDivision, UnknownRecord } from '@/types';

type LocationAccessInfoProps = {
  profile: UnknownRecord | null;
  divisions: IDivision[];
  functionalBranches: IBranch[];
};

const ListLine: React.FC<{ items: string[] }> = ({ items }) => (
  <span>{items.length > 0 ? items.join(' | ') : '—'}</span>
);

const LocationAccessInfo: React.FC<LocationAccessInfoProps> = ({
  profile,
  divisions,
  functionalBranches,
}) => {
  return (
    <Text className="profile-branch-details">
      {/* Home Branch */}
      <Text>
        <Text className="pr-1" variant="b" weight="semibold">
          Home Branch:
        </Text>
        <span>{profile?.center_home?.center_name || '—'}</span>
      </Text>

      {/* Divisions */}
      <Text className="division-strip">
        <Text className="pr-1" variant="b" weight="semibold">
          Division:
        </Text>
        <ListLine items={divisions.map((d) => d.division_name)} />
      </Text>

      {/* Functional Branches */}
      <Text className="functional-branch-tag">
        <Text className="pr-1" variant="b" weight="semibold">
          Functional Branch:
        </Text>
        <Text className="scrl-y">
          <ListLine items={functionalBranches.map((b) => b.center_name)} />
        </Text>
      </Text>
    </Text>
  );
};

export default LocationAccessInfo;