import classNames from 'classnames';
import { ReactNode, FC } from 'react';
import { observer } from 'mobx-react';

import { Text, Card, Layout, LayoutProps } from '@servicetitan/design-system';

export interface SectionProps {
    title: ReactNode;
    text?: ReactNode | string;
    children: ReactNode;
    qaPrefix?: string;
    className?: string;
    layout?: LayoutProps['type'];
    withoutBorders?: boolean;
}

export const SettingsSection: FC<SectionProps> = observer(
    ({
        title,
        text,
        children,
        qaPrefix,
        className = '',
        layout = 'support',
        withoutBorders,
    }: SectionProps) => (
        <Layout type={layout} direction="left" className={classNames(qaPrefix, className)}>
            <Layout.Section>
                {typeof title === 'string' ? (
                    <Text size={3} bold className={`${qaPrefix}-title`}>
                        {title}
                    </Text>
                ) : (
                    title
                )}
                {typeof text === 'string' ? (
                    <Text size={2} subdued className={`${qaPrefix}-text`}>
                        {text}
                    </Text>
                ) : (
                    text
                )}
            </Layout.Section>
            <Layout.Section>
                {withoutBorders ? (
                    <div className={`${qaPrefix}-content`}>{children}</div>
                ) : (
                    <Card raised>
                        <Card.Section className={`${qaPrefix}-content`}>{children}</Card.Section>
                    </Card>
                )}
            </Layout.Section>
        </Layout>
    ),
);