import type { ElementType, ReactNode } from "react";

type SectionVariant = "default" | "hero" | "sm" | "lg" | "flush";

interface SectionProps {
  children: ReactNode;
  className?: string;
  as?: ElementType;
  variant?: SectionVariant;
  id?: string;
}

export function Section({
  children,
  className = "",
  as: Tag = "section",
  variant = "default",
  id,
}: SectionProps) {
  const variantClasses: Record<SectionVariant, string> = {
    default: "section",
    hero: "section section--hero",
    sm: "section section--sm",
    lg: "section section--lg",
    flush: "section section--flush",
  };

  return (
    <Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
      {children}
    </Tag>
  );
}
