import React from 'react';

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

import { Heading, Text } from '@/components/ui/typography';
import { cn } from '@/lib/utils';

import { calendarCategories } from '@/config/calendarCategories';

export default async function ProgramsPageLayout({ children }: { children: React.ReactNode }) {
  const t = await getTranslations('eventsPage');

  return (
    <div className="relative w-full overflow-hidden bg-white text-[#151720] px-site pb-page pt-page">
      <div className="pointer-events-none absolute inset-0 opacity-20">
        <div className="absolute -left-24 -top-24 h-72 w-72 bg-mma-cyan/20 blur-3xl" />
        <div className="absolute right-0 top-1/3 h-96 w-96 bg-mma-yellow/20 blur-[120px]" />
      </div>
      <div className="relative mx-auto max-w-boxed flex flex-col gap-3 lg:gap-5">
        <div className="space-y-1">
          <Heading
            as="h1"
            variant="sectionTitle"
            tone="strong"
            className="text-2xl sm:text-3xl lg:text-4xl"
          >
            {t('title')}
          </Heading>
          <Text variant="lead" tone="muted" className="max-w-4xl">
            {t('subtitle')}
          </Text>
        </div>

        <div className="flex flex-wrap items-center gap-2 sm:gap-3">
          {calendarCategories.map((category) => {
            return (
              <div
                key={t(`calendar.categories.${category.labelKey}`)}
                className="ui-card !border-0 !p-0 inline-flex items-center gap-1 px-3 py-1.5 shadow-[0_20px_50px_-40px_rgba(20,25,40,0.35)]"
                title={t(`calendar.categories.${category.labelKey}`)}
              >
                <div className={cn('h-2.5 w-2.5 sm:h-3 sm:w-3 flex-shrink-0', category.bgColor)} />
                <Text
                  as="span"
                  variant="meta"
                  className={cn('sm:text-xs tracking-[0.18em]', category.textColor)}
                >
                  {t(`calendar.categories.${category.labelKey}`)}
                </Text>
              </div>
            );
          })}
        </div>

        <div className="ui-panel">{children}</div>
      </div>
    </div>
  );
}