import { FC } from 'react';
import { Grid, Text } from '@servicetitan/design-system';

import * as Styles from './result-definitions-modal.module.less';

export const Header: FC = () => (
    <div className="position-sticky position-t-0 z-popover">
        <Grid columns={3} className="p-y-1 bg-white">
            <Grid.Column>
                <Text size={1} className="c-neutral-90 tt-uppercase">
                    Result
                </Text>
            </Grid.Column>
            <Grid.Column>
                <Text size={1} className="c-neutral-90 tt-uppercase">
                    Risk
                </Text>
            </Grid.Column>
            <Grid.Column>
                <Text size={1} className="c-neutral-90 tt-uppercase">
                    Recommendation
                </Text>
            </Grid.Column>
        </Grid>
        <hr className={Styles.divider} />
    </div>
);