'use client';

import {useEffect, useRef, useState} from 'react';
import {useTranslations} from 'next-intl';
import {FaEye} from 'react-icons/fa';

import {hitVisite, type VisiteTableCible} from '@/services/visiteService';

import './VisitCounter.css';

interface VisitCounterProps {
  tableCible: VisiteTableCible;
  cibleId: number;
}

/**
 * Compteur de visites d'une fiche : compte la visite courante au montage, puis affiche le total.
 * Rien n'est affiché tant que l'API n'a pas répondu, ni si elle échoue.
 */
export default function VisitCounter({tableCible, cibleId}: VisitCounterProps) {
  const t = useTranslations('Common');
  const [count, setCount] = useState<number | null>(null);
  const counted = useRef(false);

  useEffect(() => {
    // Une seule visite par affichage, même quand React remonte l'effet (mode strict).
    if (counted.current) return;
    counted.current = true;

    hitVisite(tableCible, cibleId).then(setCount);
  }, [tableCible, cibleId]);

  if (count === null) return null;

  return (
    <span className="tk-visit-counter" data-testid="visit-counter">
      <FaEye className="tk-visit-counter-icon" aria-hidden="true" />
      {t('visits_count', {count})}
    </span>
  );
}