// Example: page header with a breadcrumb, description, and actions.
import { Plus } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  PageHeader,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderLeft,
  PageHeaderRight,
  PageHeaderTitle,
  PageHeaderTop,
} from "@/components/widgets/page-header/PageHeader"

export default function Example() {
  return (
    <PageHeader>
      <PageHeaderTop>
        <span className="text-sm text-text-secondary">
          Settings / Team / Members
        </span>
      </PageHeaderTop>
      <PageHeaderContent>
        <PageHeaderLeft>
          <PageHeaderTitle>Members</PageHeaderTitle>
          <PageHeaderDescription>
            Invite teammates and manage their access.
          </PageHeaderDescription>
        </PageHeaderLeft>
        <PageHeaderRight>
          <Button variant="outline">Export</Button>
          <Button>
            <Plus />
            Invite member
          </Button>
        </PageHeaderRight>
      </PageHeaderContent>
    </PageHeader>
  )
}