import React from 'react';
import { ChevronIcon } from '@orchard/frontend-react-components';
import { HEADER_CLASSNAME } from 'src/constants/header';

const CLASSNAME_TITLE = `${HEADER_CLASSNAME}-dropdownTitle`;

interface HeaderAccountDropdownTitleProps {
    contactName: string;
    accountName: string;
    accountId: number;
}

const HeaderAccountDropdownTitle: React.FC<HeaderAccountDropdownTitleProps> = ({
    contactName,
    accountName,
    accountId,
}) => (
    <div className={CLASSNAME_TITLE} id="HeaderAccountDetails">
        <div>
            <div>{contactName}</div>
            <div>
                <span className="font-weight-bold pr-1">{accountName}</span>
                <span>{`ID: ${accountId}`}</span>
            </div>
        </div>
        <ChevronIcon />
    </div>
);

export default HeaderAccountDropdownTitle;