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

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'Misc' })
  return { title: t('downloadAddons.title') }
}

// Lista de addons (edítala con los tuyos). name/descKey/url.
const ADDONS: { name: string; descKey: string; url: string }[] = [
  { name: 'Deadly Boss Mods (DBM)', descKey: 'descDbm', url: 'https://www.curseforge.com/wow/addons/deadly-boss-mods' },
  { name: 'Details! Damage Meter', descKey: 'descDetails', url: 'https://www.curseforge.com/wow/addons/details' },
  { name: 'AtlasLoot', descKey: 'descAtlasLoot', url: 'https://www.curseforge.com/wow/addons/atlasloot-enhanced' },
  { name: 'Questie', descKey: 'descQuestie', url: 'https://www.curseforge.com/wow/addons/questie' },
  { name: 'Bagnon', descKey: 'descBagnon', url: 'https://www.curseforge.com/wow/addons/bagnon' },
  { name: 'Bartender4', descKey: 'descBartender4', url: 'https://www.curseforge.com/wow/addons/bartender4' },
  { name: 'Auctioneer', descKey: 'descAuctioneer', url: 'https://www.curseforge.com/wow/addons/auctioneer' },
  { name: 'Pawn', descKey: 'descPawn', url: 'https://www.curseforge.com/wow/addons/pawn' },
]

export default async function DownloadAddonsPage() {
  const t = await getTranslations('Misc')
  return (
    <div className="main-page">
      <div className="middle-content">
        <div className="body-content">
          <div className="title-content">
            <h1>{t('downloadAddons.title')}</h1>
          </div>

          <div className="box-content">
            <div className="title-box-content">
              <h2>{t('downloadAddons.recommended')}</h2>
            </div>
            <div className="body-box-content justified">
              <p>{t('downloadAddons.intro1')}</p>
              <p>{t('downloadAddons.intro2')}</p>
              <br />
              <p><span>{t('downloadAddons.howToInstall')}</span></p>
              <p>{t('downloadAddons.step1')}</p>
              <p>{t.rich('downloadAddons.step2', { s: (c) => <span>{c}</span> })}</p>
              <p>{t.rich('downloadAddons.step3', { s: (c) => <span>{c}</span> })}</p>
              <br />
              <hr />
              <br />
              <table className="max-center-table">
                <tbody>
                  {ADDONS.map((a) => (
                    <tr key={a.name} className="team-center-table-tr">
                      <td className="lefted separate">
                        <span className="yellow-info">{a.name}</span>
                        <p className="third-brown small-font">{t(`downloadAddons.${a.descKey}`)}</p>
                      </td>
                      <td className="real-info-box no-wrap-td">
                        <a href={a.url} target="_blank" rel="noopener noreferrer" className="ns-tool-btn">
                          {t('downloadAddons.download')}
                        </a>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}