import {Separator} from "@/components/ui/separator"

export default function Section({
  title,
  description,
  action,
  children,
}: {
  title: string
  description?: string
  action?: React.ReactNode
  children: React.ReactNode
}) {
  return (
    <section className="w-full">
      <div className="flex flex-col md:flex-row md:items-end gap-2 md:gap-4">
        <div className="flex-1">
          <h2 className="text-lg md:text-xl font-semibold">{title}</h2>
          {description ? <p className="text-sm text-muted-foreground mt-1">{description}</p> : null}
        </div>
        {action ? <div className="shrink-0">{action}</div> : null}
      </div>
      <Separator className="my-4" />
      <div>{children}</div>
    </section>
  )
}