import { useTranslations } from '@/hooks/translations';
import { images } from '../../data';
import styles from './styles.module.scss';
import { ELocalesPlacement } from '@/locales';

interface CustomerCounterProps {
    count: number;
}

function CustomerCounter({ count }: CustomerCounterProps) {
    const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);

    return (
        <div className={styles.container}>
            {/* <div className={styles.circularText}>
                <svg viewBox="0 0 100 100">
                    <path
                        id="curve"
                        d="M 50,50 m -40,0 a 40,40 0 1,1 80,0 a 40,40 0 1,1 -80,0"
                        fill="none"
                    />
                    <text>
                        <textPath href="#curve">
                            Over happy customers
                        </textPath>
                    </text>
                    <text>
                        <textPath href="#curve">
                            Over happy customers
                        </textPath>
                    </text>
                </svg>
            </div> */}
            <img className={styles.circularText} src={images(translate("marketing-landing.circular-text-image"))} alt="" />
            <div className={styles.count}>{count}</div>
        </div>
    );
}

export default CustomerCounter;