<commit_before>import React from 'react';

import { c } from 'ttag';

import { PLANS } from '@proton/shared/lib/constants';
import { Audience } from '@proton/shared/lib/interfaces';

import { CalendarLogo, DriveLogo, Icon, Info, MailLogo, VpnLogo } from '../../../components';
import { classnames } from '../../../helpers';
import { AllFeatures, getFeatureDefinitions } from '../features';
import { PlanCardFeatureDefinition, ShortPlan } from '../features/interface';

interface FeatureListProps {
    features: PlanCardFeatureDefinition[];
    icon?: boolean;
    fire?: boolean;
}

export const PlanCardFeatureList = ({ features, icon, fire = true }: FeatureListProps) => {
    return (
        <ul className="bg-weak-odd unstyled mt1 mb2 on-mobile-mb0">
            {features.map((feature) => {
                return (
                    <li key={feature.featureName} className="px0-75 py0-5 flex rounded">
                        <div
                            className={classnames([
                                'flex-no-min-children flex-nowrap',
                                !feature.included && 'color-hint',
                            ])}
                        >
                            <span className="flex flex-item-noshrink mr0-75">
                                {feature.fire && fire ? (
                                    <Icon size={20} name="fire" className="color-warning" />
                                ) : feature.included ? (
                                    <span className="color-success">
                                        {icon && feature.icon ? (
                                            <Icon size={20} name={feature.icon} />
                                        ) : (
                                            <Icon size={20} name="checkmark" />
                                        )}
                                    </span>
                                ) : (
                                    <Icon size={20} name="cross" className="mt0-1" />
                                )}
                            </span>
                            <span className="flex-item-fluid">
                                <span className="mr0-5 align-middle">{feature.featureName}</span>
                                {feature.tooltip ? (
                                    <Info
                                        className="align-middle"
                                        title={feature.tooltip}
                                        colorPrimary={feature.included}
                                    />
                                ) : null}
                            </span>
                        </div>
                    </li>
                );
            })}
        </ul>
    );
};

interface Props {
    planName: PLANS;
    features: AllFeatures;
    audience: Audience;
}

const PlanCardFeatures = ({ planName, features, audience }: Props) => {
    const highlightFeatures = (
        <div>
            <PlanCardFeatureList features={getFeatureDefinitions(planName, features.highlight, audience)} />
        </div>
    );
    const mailFeatures = (<commit_msg>Remove nested ternary<commit_after>import React from 'react';

import { c } from 'ttag';

import { PLANS } from '@proton/shared/lib/constants';
import { Audience } from '@proton/shared/lib/interfaces';

import { CalendarLogo, DriveLogo, Icon, Info, MailLogo, VpnLogo } from '../../../components';
import { classnames } from '../../../helpers';
import { AllFeatures, getFeatureDefinitions } from '../features';
import { PlanCardFeatureDefinition, ShortPlan } from '../features/interface';

interface FeatureListProps {
    features: PlanCardFeatureDefinition[];
    icon?: boolean;
    fire?: boolean;
}

export const PlanCardFeatureList = ({ features, icon, fire = true }: FeatureListProps) => {
    return (
        <ul className="bg-weak-odd unstyled mt1 mb2 on-mobile-mb0">
            {features.map((feature) => {
                const iconToDisplay = (() => {
                    if (feature.fire && fire) {
                        return <Icon size={20} name="fire" className="color-warning" />;
                    }

                    if (feature.included) {
                        return (
                            <span className="color-success">
                                {icon && feature.icon ? (
                                    <Icon size={20} name={feature.icon} />
                                ) : (
                                    <Icon size={20} name="checkmark" />
                                )}
                            </span>
                        );
                    }

                    return <Icon size={20} name="cross" className="mt0-1" />;
                })();

                return (
                    <li key={feature.featureName} className="px0-75 py0-5 flex rounded">
                        <div
                            className={classnames([
                                'flex-no-min-children flex-nowrap',
                                !feature.included && 'color-hint',
                            ])}
                        >
                            <span className="flex flex-item-noshrink mr0-75">{iconToDisplay}</span>
                            <span className="flex-item-fluid">
                                <span className="mr0-5 align-middle">{feature.featureName}</span>
                                {feature.tooltip ? (
                                    <Info
                                        className="align-middle"
                                        title={feature.tooltip}
                                        colorPrimary={feature.included}
                                    />
                                ) : null}
                            </span>
                        </div>
                    </li>
                );
            })}
        </ul>
    );
};

interface Props {
    planName: PLANS;
    features: AllFeatures;
    audience: Audience;
}

const PlanCardFeatures = ({ planName, features, audience }: Props) => {
    const highlightFeatures = (
        <div>
            <PlanCardFeatureList features={getFeatureDefinitions(planName, features.highlight, audience)} />
        </div>
    );
    const mailFeatures = (
{'fraction_non_alphanumeric': 0.114281210592686, 'fraction_numerical': 0.007250945775535939, 'mean_word_length': 1.083743842364532, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 54, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 28, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5833595', 'n_tokens_mistral': 1484, 'n_tokens_neox': 1403, 'n_words': 292}