import { getTranslations } from 'next-intl/server'

/**
 * Barra de redes sociales — réplica del partial Django `partials/social.html`
 * con las clases del tema real (social-media, social-button + marca).
 */
export async function Social() {
  const t = await getTranslations('UI')
  return (
    <div className="social-media">
      <span className="big-font">{t('social.followUs')}</span>
      <a
        href="https://www.facebook.com/NovaWoW/"
        className="social-button social-button-responsive facebook"
        target="_blank"
        title="Facebook NovaWoW"
        rel="noopener noreferrer"
      >
        <div className="social-inline">
          <i className="fab fa-facebook-f"></i>
        </div>
      </a>
      <a
        href="https://www.instagram.com/NovaWoW/"
        className="social-button social-button-responsive instagram"
        target="_blank"
        title="Instagram NovaWoW"
        rel="noopener noreferrer"
      >
        <div className="social-inline">
          <i className="fab fa-instagram"></i>
        </div>
      </a>
      <a
        href="https://twitter.com/NovaWoW"
        className="social-button social-button-responsive twitter"
        target="_blank"
        title="Twitter NovaWoW"
        rel="noopener noreferrer"
      >
        <div className="social-inline">
          <i className="fab fa-x-twitter"></i>
        </div>
      </a>
      <a
        href="https://www.youtube.com/channel/UCaHL8BZcho8AkeM9wckQbyg"
        className="social-button social-button-responsive youtube"
        target="_blank"
        title="Youtube NovaWoW"
        rel="noopener noreferrer"
      >
        <div className="social-inline">
          <i className="fab fa-youtube"></i>
        </div>
      </a>
      <a
        href="https://discord.novawow.com"
        className="social-button social-button-responsive discord"
        target="_blank"
        title="Discord NovaWoW"
        rel="noopener noreferrer"
      >
        <div className="social-inline">
          <i className="fab fa-discord"></i>
        </div>
      </a>
    </div>
  )
}