'use client';
import React from 'react';
import {useTranslations} from 'next-intl';
import {FaApple, FaGooglePlay} from 'react-icons/fa';
import './AppBadges.css';

interface AppBadgesProps {
  /** `full` : badge deux lignes (accueil) ; `compact` : icône seule (tête de page). */
  variant?: 'full' | 'compact';
  className?: string;
}

/** Liens vers les applications mobiles ; les URL des magasins viennent de l'environnement (repli sur « # »). */
const APP_STORE_URL = process.env.NEXT_PUBLIC_APP_STORE_URL || '#';
const GOOGLE_PLAY_URL = process.env.NEXT_PUBLIC_GOOGLE_PLAY_URL || '#';

export default function AppBadges({variant = 'full', className}: AppBadgesProps) {
  const t = useTranslations('HomePage');
  const badges = [
    {href: APP_STORE_URL, Icon: FaApple, name: t('community_app_store')},
    {href: GOOGLE_PLAY_URL, Icon: FaGooglePlay, name: t('community_google_play')},
  ];

  if (variant === 'compact') {
    return (
      <span className={`tk-app-badges tk-app-badges--compact${className ? ` ${className}` : ''}`}>
        {badges.map(({href, Icon, name}) => (
          <a key={name} href={href} className="tk-app-badge-icon" aria-label={name} target="_blank" rel="noopener noreferrer">
            <Icon aria-hidden="true" />
          </a>
        ))}
      </span>
    );
  }

  return (
    <div className={`tk-community__apps${className ? ` ${className}` : ''}`}>
      {badges.map(({href, Icon, name}) => (
        <a key={name} href={href} className="tk-community__app-badge" aria-label={name}>
          <Icon aria-hidden="true" />
          <span className="tk-community__app-badge-text">
            <span className="tk-community__app-badge-label">{t('community_available_on')}</span>
            <span className="tk-community__app-badge-name">{name}</span>
          </span>
        </a>
      ))}
    </div>
  );
}