import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

export function PaginationSection() {
  return (
    <section id="pagination" className="mb-12">
      <SectionHeading title="Pagination" description="Navigate between pages of content." />

      <ComponentContainer
        title="Basic Pagination"
        description="Simple pagination with page numbers."
        code={`<nav className="flex items-center justify-center space-x-2">
  <Button variant="outline" size="icon" className="h-8 w-8 p-0" disabled>
    <ChevronLeft className="h-4 w-4" />
    <span className="sr-only">Previous Page</span>
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 bg-primary text-primary-foreground px-3">
    1
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
    2
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
    3
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
    4
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
    5
  </Button>
  <Button variant="outline" size="icon" className="h-8 w-8 p-0">
    <ChevronRight className="h-4 w-4" />
    <span className="sr-only">Next Page</span>
  </Button>
</nav>`}
      >
        <nav className="flex items-center justify-center space-x-2">
          <Button variant="outline" size="icon" className="h-8 w-8 p-0" disabled>
            <ChevronLeft className="h-4 w-4" />
            <span className="sr-only">Previous Page</span>
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 bg-primary text-primary-foreground px-3">
            1
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
            2
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
            3
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
            4
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
            5
          </Button>
          <Button variant="outline" size="icon" className="h-8 w-8 p-0">
            <ChevronRight className="h-4 w-4" />
            <span className="sr-only">Next Page</span>
          </Button>
        </nav>
      </ComponentContainer>

      <ComponentContainer
        title="Pagination with Ellipsis"
        description="Pagination for large numbers of pages with ellipsis."
        code={`<nav className="flex items-center justify-center space-x-2">
  <Button variant="outline" size="icon" className="h-8 w-8 p-0">
    <ChevronLeft className="h-4 w-4" />
    <span className="sr-only">Previous Page</span>
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
    1
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 flex items-center justify-center" disabled>
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
    4
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 bg-primary text-primary-foreground px-3">
    5
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
    6
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 flex items-center justify-center" disabled>
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </Button>
  <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
    10
  </Button>
  <Button variant="outline" size="icon" className="h-8 w-8 p-0">
    <ChevronRight className="h-4 w-4" />
    <span className="sr-only">Next Page</span>
  </Button>
</nav>`}
      >
        <nav className="flex items-center justify-center space-x-2">
          <Button variant="outline" size="icon" className="h-8 w-8 p-0">
            <ChevronLeft className="h-4 w-4" />
            <span className="sr-only">Previous Page</span>
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
            1
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 flex items-center justify-center" disabled>
            <MoreHorizontal className="h-4 w-4" />
            <span className="sr-only">More pages</span>
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
            4
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 bg-primary text-primary-foreground px-3">
            5
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
            6
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 flex items-center justify-center" disabled>
            <MoreHorizontal className="h-4 w-4" />
            <span className="sr-only">More pages</span>
          </Button>
          <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
            10
          </Button>
          <Button variant="outline" size="icon" className="h-8 w-8 p-0">
            <ChevronRight className="h-4 w-4" />
            <span className="sr-only">Next Page</span>
          </Button>
        </nav>
      </ComponentContainer>

      <ComponentContainer
        title="Pagination with Text"
        description="Pagination with previous and next text labels."
        code={`<nav className="flex items-center justify-between">
  <Button variant="outline" size="sm" className="flex items-center gap-1">
    <ChevronLeft className="h-4 w-4" />
    Previous
  </Button>
  <div className="flex items-center space-x-2">
    <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
      1
    </Button>
    <Button variant="outline" size="sm" className="h-8 min-w-8 bg-primary text-primary-foreground px-3">
      2
    </Button>
    <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
      3
    </Button>
  </div>
  <Button variant="outline" size="sm" className="flex items-center gap-1">
    Next
    <ChevronRight className="h-4 w-4" />
  </Button>
</nav>`}
      >
        <nav className="flex items-center justify-between">
          <Button variant="outline" size="sm" className="flex items-center gap-1">
            <ChevronLeft className="h-4 w-4" />
            Previous
          </Button>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
              1
            </Button>
            <Button variant="outline" size="sm" className="h-8 min-w-8 bg-primary text-primary-foreground px-3">
              2
            </Button>
            <Button variant="outline" size="sm" className="h-8 min-w-8 px-3">
              3
            </Button>
          </div>
          <Button variant="outline" size="sm" className="flex items-center gap-1">
            Next
            <ChevronRight className="h-4 w-4" />
          </Button>
        </nav>
      </ComponentContainer>
    </section>
  )
}