import * as React from 'react';
import { Reveal } from './Reveal';
import { Label } from './Typography';
import { cn } from '../utils/cn';

interface SectionProps {
  number?: string;
  title?: string;
  children: React.ReactNode;
  className?: string;
  delay?: number;
  variant?: 'white' | 'gray';
  borderTop?: boolean;
  borderBottom?: boolean;
  containerVariant?: 'narrow' | 'normal' | 'wide';
  illustration?: React.ReactNode;
}

export const Section: React.FC<SectionProps> = ({
  number,
  title,
  children,
  className = "",
  delay = 0,
  variant = 'white',
  borderTop = false,
  borderBottom = false,
  containerVariant = 'narrow',
  illustration,
}) => {
  const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white';
  const borderTopClass = borderTop ? 'border-t border-slate-100' : '';
  const borderBottomClass = borderBottom ? 'border-b border-slate-100' : '';
  const containerClass = containerVariant === 'wide' ? 'wide-container' : containerVariant === 'normal' ? 'container' : 'narrow-container';

  return (
    <section className={cn(
      "relative py-24 md:py-40 group overflow-hidden",
      bgClass,
      borderTopClass,
      borderBottomClass,
      className
    )}>
      <div className={cn("relative z-10", containerClass)}>
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
          {/* Sidebar: Number & Title */}
          <div className="md:col-span-3">
            <div className="md:sticky md:top-40 space-y-8">
              {number && (
                <Reveal delay={delay}>
                  <span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter">
                    {number}
                  </span>
                </Reveal>
              )}
              {title && (
                <Reveal delay={delay + 0.1}>
                  <div className="flex items-center gap-4">
                    <Label className="text-slate-900 text-[10px] tracking-[0.4em]">
                      {title}
                    </Label>
                  </div>
                </Reveal>
              )}
              {illustration && (
                <Reveal delay={delay + 0.2}>
                  <div className="pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
                    {illustration}
                  </div>
                </Reveal>
              )}
            </div>
          </div>

          {/* Main Content */}
          <div className="md:col-span-9">
            {children}
          </div>
        </div>
      </div>
    </section>
  );
};
