import { FC } from 'react';

import { Grid, Text, Tag } from '@servicetitan/design-system';
import { core as tokens } from '@servicetitan/tokens';

export enum RiskType {
    Medium,
    High,
    VeryHigh,
}

const riskTypeToColor = new Map<RiskType, string>([
    [RiskType.Medium, 'warning'],
    [RiskType.High, tokens.default.tokens.colorRed500],
    [RiskType.VeryHigh, tokens.default.tokens.colorRed600],
]);

const riskTypeToText = new Map<RiskType, string>([
    [RiskType.Medium, 'Medium'],
    [RiskType.High, 'High'],
    [RiskType.VeryHigh, 'Very High'],
]);

interface RowProps {
    result: string;
    risk: RiskType;
    recommendation: string;
}

export const Row: FC<RowProps> = ({ result, risk, recommendation }) => (
    <Grid columns={3} className="m-y-1">
        <Grid.Column>
            <Text size={2} bold>
                {result}
            </Text>
        </Grid.Column>
        <Grid.Column>
            <Tag color={riskTypeToColor.get(risk)} compact>
                {riskTypeToText.get(risk)}
            </Tag>
        </Grid.Column>
        <Grid.Column>
            <Text size={2} bold>
                {recommendation}
            </Text>
        </Grid.Column>
    </Grid>
);