"use client"

import * as React from "react"
import { Plus } from "lucide-react"
import { Button } from "@/registry/ui/button"
import { TabSection } from "@/registry/ui/tab-section"

export default function TabSectionDemo() {
  return (
    <TabSection
      title="Budget"
      description="Lines and allocations for this project."
      actions={
        <Button size="sm">
          <Plus className="mr-1 size-4" />
          Add line
        </Button>
      }
    >
      <p className="text-sm text-muted-foreground">
        Tab content — typically a DataTable — renders here, under a header
        whose title sits left and primary actions sit top-right.
      </p>
    </TabSection>
  )
}