import { Box, Typography } from '@mui/material';
import { getOrgDisplayNames } from 'utils/OrgComboUtils';

export default function OrgOptionLabel({ option }) {
    const { primary, secondary } = getOrgDisplayNames(option);

    if (!primary) return null;

    return (
        <Box sx={{ py: 0.25, width: '100%' }}>
            <Typography variant="body2" lineHeight={1.3}>
                {primary}
            </Typography>
            {secondary ? (
                <Typography
                    variant="body2"
                    color="text.secondary"
                    lineHeight={1.25}
                    sx={{ display: 'block', mt: 0.25, fontSize: '0.8125rem' }}
                >
                    {secondary}
                </Typography>
            ) : null}
        </Box>
    );
}

export const renderOrgOption = (props, option) => (
    <li {...props} key={option.key ?? option.id}>
        <OrgOptionLabel option={option} />
    </li>
);