"use client"

import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@/lib/utils"

export default function Pagination() {
  return (
    <nav className="flex items-center justify-center space-x-2">
      <button className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-zinc-200 bg-white text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50 dark:hover:bg-zinc-800 dark:hover:text-zinc-50">
        <ChevronLeft className="h-4 w-4" />
        <span className="sr-only">Previous</span>
      </button>
      <button className="inline-flex h-9 w-9 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium text-zinc-50 shadow dark:bg-zinc-50 dark:text-zinc-900">
        1
      </button>
      <button className="inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-50 dark:hover:bg-zinc-800 dark:hover:text-zinc-50">
        2
      </button>
      <button className="inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-50 dark:hover:bg-zinc-800 dark:hover:text-zinc-50">
        3
      </button>
      <span className="flex h-9 w-9 items-center justify-center text-zinc-500 hover:bg-transparent dark:text-zinc-400">
        <MoreHorizontal className="h-4 w-4" />
        <span className="sr-only">More pages</span>
      </span>
      <button className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-zinc-200 bg-white text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50 dark:hover:bg-zinc-800 dark:hover:text-zinc-50">
        <ChevronRight className="h-4 w-4" />
        <span className="sr-only">Next</span>
      </button>
    </nav>
  )
}