import {
  Mail,
  BellRing,
  CircleHelp,
  Award,
  CreditCard,
  Images,
  LayoutGrid,
  Building2,
  Sparkles,
} from 'lucide-react'
import { SectionCard } from '../components/SectionCard'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { useT } from '../i18n/useT'
import type { BusinessMessageKey } from '../i18n/messages'
import styles from '../components/PageContent.module.css'

const websiteSections: {
  icon: typeof Images
  titleKey: BusinessMessageKey
  descKey: BusinessMessageKey
  linkKey: BusinessMessageKey
  href: string
}[] = [
  {
    icon: Images,
    titleKey: 'nav.website.sliders',
    descKey: 'website.card.sliders.desc',
    linkKey: 'website.card.sliders.link',
    href: '/website/sliders',
  },
  {
    icon: LayoutGrid,
    titleKey: 'nav.website.specialCategories',
    descKey: 'website.card.specialCategories.desc',
    linkKey: 'website.card.specialCategories.link',
    href: '/website/special-categories',
  },
  {
    icon: Building2,
    titleKey: 'nav.website.specialBrands',
    descKey: 'website.card.specialBrands.desc',
    linkKey: 'website.card.specialBrands.link',
    href: '/website/special-brands',
  },
  {
    icon: Sparkles,
    titleKey: 'nav.website.specialItems',
    descKey: 'website.card.specialItems.desc',
    linkKey: 'website.card.specialItems.link',
    href: '/website/special-items',
  },
  {
    icon: Mail,
    titleKey: 'nav.website.contact',
    descKey: 'website.card.contact.desc',
    linkKey: 'website.card.contact.link',
    href: '/website/contact',
  },
  {
    icon: BellRing,
    titleKey: 'nav.website.subscriptions',
    descKey: 'website.card.subscriptions.desc',
    linkKey: 'website.card.subscriptions.link',
    href: '/website/subscriptions',
  },
  {
    icon: CircleHelp,
    titleKey: 'nav.website.faq',
    descKey: 'website.card.faq.desc',
    linkKey: 'website.card.faq.link',
    href: '/website/faq',
  },
  {
    icon: Award,
    titleKey: 'nav.website.badges',
    descKey: 'website.card.badges.desc',
    linkKey: 'website.card.badges.link',
    href: '/website/badges',
  },
  {
    icon: CreditCard,
    titleKey: 'nav.website.ePayment',
    descKey: 'website.card.ePayment.desc',
    linkKey: 'website.card.ePayment.link',
    href: '/website/e-payment',
  },
]

export function WebsitePage() {
  const t = useT()

  return (
    <main className={styles.content}>
      <Breadcrumbs
        items={[
          { label: 'Dashboard', href: '/' },
          { label: 'Website' },
        ]}
      />
      <div className={styles.pageHeader}>
        <div>
          <h2 className={styles.pageTitle}>{t('title.website')}</h2>
          <p className={styles.pageSubtitle}>{t('website.page.subtitle')}</p>
        </div>
      </div>

      <div className={styles.gridHome}>
        {websiteSections.map((section) => (
          <SectionCard
            key={section.href}
            icon={section.icon}
            title={t(section.titleKey)}
            description={t(section.descKey)}
            linkText={t(section.linkKey)}
            href={section.href}
          />
        ))}
      </div>
    </main>
  )
}
