import type { FC } from 'react';

import { Chip, Flex, Text } from '@servicetitan/anvil2';

interface InfoSectionProps {
    nameToShow: string;
    name?: string;
    email?: string;
    isDefault?: boolean;
    isShared?: boolean;
}

export const InfoSection: FC<InfoSectionProps> = ({ nameToShow, email, isDefault, isShared }) => (
    <Flex direction="column" gap="4">
        <Flex direction="column" gap="1">
            <Flex gap="2" alignItems="center">
                <Text className="t-truncate-i m-0" title={nameToShow} variant="headline" el="h3">
                    {nameToShow}
                </Text>
                <Flex gap="1">
                    {isDefault && <Chip label="Default" />}
                    {isShared && <Chip color="#b5deff" label="Corporate HQ" />}
                </Flex>
            </Flex>
            {email && (
                <Text subdued title={email} className="t-truncate-i" size="small">
                    {email}
                </Text>
            )}
        </Flex>
    </Flex>
);