import type { FC } from '@wordpress/element';
import { useEffect, memo, useMemo } from "@wordpress/element";
import useOnboardingStore from "../../store/useOnboardingStore";
// @ts-ignore
import Icon from '@/utils/Icon';
import {__} from "@wordpress/i18n";
const Premium: FC<{ bullets: string[], stepId: string }> = memo(({ bullets, stepId }: { bullets: string[], stepId: string }) => {
    const {
        onboardingData,
        isLastStep
    } = useOnboardingStore();
    if (!bullets || !isLastStep() ) return null;

    return (
        <>
            <p className="text-text-gray text-lg leading-relaxed font-light text-center">
                { !!onboardingData.is_pro && __("The below features have automatically been enabled for you as a Pro user!", "burst-statistics")}
                { !onboardingData.is_pro && __("Get the most out of Burst Statistics with our Premium features:", "burst-statistics")}
            </p>
            <div className="mx-auto flex flex-col gap-2">
                {bullets.map((bullet: string, index: number) => (
                    <div key={`${stepId}-bullet-${index}`} className="flex items-center  gap-2 ml-2">
                    <span className="flex-shrink-0 ">
                        <Icon name="check" color="green" size="25"/>
                    </span>
                        <p className="text-text-gray text-md font-normal leading-relaxed">{bullet}</p>
                    </div>
                ))}
            </div>
        </>
        );
    });
export default Premium;