import Link from 'next/link'
import Container from '@/components/frontend/Container'
import OfferHeader from '@/components/frontend/offers/OfferHeader'
import OfferSection from '@/components/frontend/offers/OfferSection'
import type { FlashSaleData } from '@/lib/db/queries/getFlashSale'

interface FlashSalePageContentProps {
  offers: FlashSaleData[]
  labels: {
    pageTitle: string
    badgeText: string
    description: string
    endsIn: string
    fallbackTitle: string
    fallbackSubtitle: string
    noActiveTitle: string
    noActiveDescription: string
    viewAllOffers: string
  }
}

// Server-renderable — no client state of its own. Every `is_offer=1`
// coupon gets its own OfferSection (own countdown, own paginated product
// grid). See DATA_FETCHING_PATTERN.md and getFlashSale.ts's getAllOffers.
export default function FlashSalePageContent({ offers, labels }: FlashSalePageContentProps) {
  return (
    <>
      <OfferHeader
        title={labels.pageTitle}
        subtitle={labels.description}
        description=""
        icon="zap"
        badgeText={labels.badgeText}
      />

      <Container className="py-8">
        {offers.length === 0 ? (
          <div className="text-center py-12">
            <div className="text-6xl mb-4">⏰</div>
            <h2 className="text-xl font-semibold text-dark mb-2">{labels.noActiveTitle}</h2>
            <p className="text-gray-custom mb-4">{labels.noActiveDescription}</p>
            <Link href="/offers" className="inline-block text-primary hover:underline">
              {labels.viewAllOffers} →
            </Link>
          </div>
        ) : (
          <div className="space-y-10">
            {offers.map((offer) => (
              <OfferSection
                key={offer.couponId}
                data={offer}
                fallbackTitle={labels.fallbackTitle}
                fallbackSubtitle={labels.fallbackSubtitle}
                endsInLabel={labels.endsIn}
              />
            ))}
          </div>
        )}
      </Container>
    </>
  )
}