import * as React from "react"

import { cn } from "@/lib/utils"

export type SectionProps = React.ComponentProps<"section"> & {
  eyebrow?: React.ReactNode
  title?: React.ReactNode
  description?: React.ReactNode
  actions?: React.ReactNode
}

function Section({ eyebrow, title, description, actions, className, children, ...props }: SectionProps) {
  return (
    <section data-slot="section" className={cn("space-y-4", className)} {...props}>
      {(eyebrow || title || description || actions) && (
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="min-w-0 space-y-1">
            {eyebrow && <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">{eyebrow}</p>}
            {title && <h2 className="text-xl font-semibold tracking-tight text-foreground">{title}</h2>}
            {description && <p className="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>}
          </div>
          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
        </div>
      )}
      {children}
    </section>
  )
}

export { Section }