import { FC } from 'react';
import classNames from 'classnames';

import { Flex, Card, Avatar } from '@servicetitan/anvil2';

import { BrandCardProps } from '../../../utils/interfaces';
import { ActionsButtonSection } from './actions-button-section';
import { InfoSection } from './info-section';

import * as Styles from '../styles.module.less';

const BRAND_NAME_PLACEHOLDER = 'Assign Brand Name';

export const BrandCard: FC<BrandCardProps> = ({
    actions,
    email,
    isDefault,
    isShared,
    logo,
    name,
    hasError,
}) => {
    const nameToShow = name || BRAND_NAME_PLACEHOLDER;

    return (
        <Card
            className={classNames(
                {
                    [Styles.cardWithError]: hasError,
                },
                Styles.brandCard,
                'qa-brand-card',
            )}
            padding="large"
        >
            <Flex
                className={Styles.cardContent}
                justifyContent="space-between"
                direction="column"
                gap="6"
            >
                <Flex
                    justifyContent="space-between"
                    alignItems="flex-start"
                    className="qa-brand-card-left-section"
                >
                    <Avatar image={logo} name={nameToShow} size="large" />
                    <ActionsButtonSection actions={actions} />
                </Flex>

                <InfoSection
                    name={name}
                    nameToShow={nameToShow}
                    email={email}
                    isDefault={isDefault}
                    isShared={isShared}
                />
            </Flex>
        </Card>
    );
};