import { Badge, Button, Card, CardContent, PageContainer, PageHeader, PageSection } from 'ferry-ui'
import { UserPlus } from 'lucide-react'

const MEMBERS = [
  { name: 'Maya Chen', email: 'maya@example.com', role: 'Owner' },
  { name: 'Jonas Weber', email: 'jonas@example.com', role: 'Admin' },
  { name: 'Priya Patel', email: 'priya@example.com', role: 'Member' },
]

export default function PageHero() {
  return (
    <div className="rounded-lg border">
      <PageContainer size="narrow">
        <PageHeader
          title="Members"
          description="People with access to this workspace."
          actions={
            <Button variant="primary" icon={<UserPlus />}>
              Invite member
            </Button>
          }
        />
        <PageSection title="Active members" description="They can sign in today.">
          <Card className="divide-y">
            {MEMBERS.map((member) => (
              <CardContent key={member.email} className="flex items-center justify-between gap-4">
                <div className="flex min-w-0 flex-col">
                  <span className="truncate text-sm text-foreground">{member.name}</span>
                  <span className="truncate text-[13px] text-foreground-light">{member.email}</span>
                </div>
                <Badge>{member.role}</Badge>
              </CardContent>
            ))}
          </Card>
        </PageSection>
        <PageSection title="Pending invitations" description="An invitation stays valid for 7 days.">
          <Card>
            <CardContent className="text-[13px] text-foreground-light">No invitation is pending.</CardContent>
          </Card>
        </PageSection>
      </PageContainer>
    </div>
  )
}

import { Button, PageHeader } from 'ferry-ui'
import { Download, Plus } from 'lucide-react'

export default function PageHeaderActions() {
  return (
    <PageHeader
      title="Invoices"
      description="Each invoice of your customers, newest first."
      actions={
        <>
          <Button icon={<Download />}>Export</Button>
          <Button variant="primary" icon={<Plus />}>
            New invoice
          </Button>
        </>
      }
    />
  )
}

import { Badge, PageHeader } from 'ferry-ui'

export default function PageHeaderBadges() {
  return (
    <PageHeader
      title="Usage reports"
      description="The API calls of each project, day by day."
      badges={<Badge variant="info">Beta</Badge>}
    />
  )
}

import type * as React from 'react'
import { PageBackLink, PageHeader } from 'ferry-ui'

// The demo stays on this page. In an app, give the path to `href` and remove `onClick`.
const stay = (event: React.MouseEvent) => event.preventDefault()

export default function PageBackLinkDemo() {
  return (
    <PageHeader
      eyebrow={
        <PageBackLink href="#" onClick={stay}>
          Projects
        </PageBackLink>
      }
      title="Create a project"
      description="Give the project a name. You can change it later in the settings."
    />
  )
}

import type * as React from 'react'
import { Button, PageBackLink, PageHeader, StatusBadge } from 'ferry-ui'
import { Download } from 'lucide-react'

// The demo stays on this page. In an app, give the path to `href` and remove `onClick`.
const stay = (event: React.MouseEvent) => event.preventDefault()

export default function PageHeaderLarge() {
  return (
    <PageHeader
      size="lg"
      eyebrow={
        <PageBackLink href="#" onClick={stay}>
          Customers
        </PageBackLink>
      }
      title="Acme"
      description="Customer since March 2024. 42 seats."
      badges={<StatusBadge tone="success" label="Active" size="sm" />}
      actions={<Button icon={<Download />}>Export</Button>}
    />
  )
}

import { Button, PageHeader, Tabs, TabsList, TabsTrigger } from 'ferry-ui'
import { UserPlus } from 'lucide-react'

export default function PageHeaderTabs() {
  return (
    <PageHeader
      title="Team"
      description="The people who can open this workspace."
      actions={
        <Button variant="primary" icon={<UserPlus />}>
          Invite member
        </Button>
      }
    >
      <Tabs defaultValue="members">
        <TabsList aria-label="Team sections">
          <TabsTrigger value="members">Members</TabsTrigger>
          <TabsTrigger value="invitations">Invitations</TabsTrigger>
          <TabsTrigger value="roles">Roles</TabsTrigger>
        </TabsList>
      </Tabs>
    </PageHeader>
  )
}

import { Badge, Button, Card, CardContent, PageSection } from 'ferry-ui'
import { Plus } from 'lucide-react'

export default function PageSections() {
  return (
    <div>
      <PageSection
        id="payment-methods"
        title="Payment methods"
        description="The default card pays the invoice of each month."
        actions={
          <Button size="tiny" icon={<Plus />}>
            Add card
          </Button>
        }
      >
        <Card>
          <CardContent className="flex items-center justify-between gap-4 text-sm">
            <span className="text-foreground">Card with the last digits 4242</span>
            <Badge>Default</Badge>
          </CardContent>
        </Card>
      </PageSection>
      <PageSection id="billing-address" title="Billing address">
        <Card>
          <CardContent className="text-sm text-foreground">Acme, 12 Harbor Street, Portland</CardContent>
        </Card>
      </PageSection>
    </div>
  )
}