'use client';

import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { Container } from '@/components/ui/container';
import { Reveal } from '@/components/ui/reveal';
import type { Locale } from '@/i18n/config';

export function Section({
  title,
  subtitle,
  eyebrow,
  viewAllHref,
  locale,
  tone = 'light',
  children
}: {
  title: string;
  subtitle?: string;
  eyebrow?: string;
  viewAllHref?: string;
  locale?: Locale;
  tone?: 'light' | 'tint' | 'dark';
  children: React.ReactNode;
}) {
  const t = useTranslations('common');

  const tones = {
    light: {
      section: 'bg-paper text-graphite-900',
      eyebrow: 'text-copper-600',
      rule: 'from-copper-500 to-transparent',
      title: '',
      subtitle: 'text-graphite-900/60',
      link: 'text-copper-600'
    },
    tint: {
      section:
        'bg-gradient-to-b from-paper to-[#f7f0e6] text-graphite-900',
      eyebrow: 'text-copper-600',
      rule: 'from-copper-500 to-transparent',
      title: '',
      subtitle: 'text-graphite-900/60',
      link: 'text-copper-600'
    },
    dark: {
      section: 'bg-graphite-950 text-paper-50',
      eyebrow: 'text-copper-400',
      rule: 'from-copper-400 to-transparent',
      title: 'text-paper-50',
      subtitle: 'text-paper-100/70',
      link: 'text-copper-400'
    }
  }[tone];

  return (
    <section className={`py-16 sm:py-24 ${tones.section}`}>
      <Container>
        <Reveal variant="up">
          <div className="flex flex-wrap items-end justify-between gap-4">
            <div>
              {eyebrow && (
                <p className={`flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.22em] ${tones.eyebrow}`}>
                  <span className={`inline-block h-px w-10 bg-gradient-to-r ${tones.rule}`} />
                  {eyebrow}
                </p>
              )}
              <h2 className={`mt-3 font-display text-2xl font-semibold sm:text-3xl ${tones.title}`}>{title}</h2>
              {subtitle && <p className={`mt-3 max-w-xl ${tones.subtitle}`}>{subtitle}</p>}
            </div>
            {viewAllHref && (
              <Link
                href={viewAllHref}
                className={`group inline-flex items-center gap-2 text-sm font-semibold ${tones.link} hover:underline`}
              >
                {t('viewAll')}
                <span className="inline-block transition-transform group-hover:translate-x-1 rtl:group-hover:-translate-x-1" aria-hidden="true">
                  {locale === 'ar' ? '←' : '→'}
                </span>
              </Link>
            )}
          </div>
        </Reveal>
        <div className="mt-10">{children}</div>
      </Container>
    </section>
  );
}