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

interface SectionProps extends React.HTMLAttributes<HTMLElement> {
  children: ReactNode;
  className?: string;
  as?: ElementType;
  variant?: "sm" | "lg" | "hero" | "flush";
}

export function Section({
  children,
  className = "",
  as: Tag = "section",
  variant,
  ...props
}: SectionProps) {
  const variantClass = variant === "sm" ? "section--sm" :
    variant === "lg" ? "section--lg" :
      variant === "hero" ? "section--hero" :
        variant === "flush" ? "section--flush" : "";

  return (
    <Tag
      className={`section ${variantClass} ${className}`.trim()}
      {...props}
    >
      {children}
    </Tag>
  );
}