import Link from 'next/link';
import {
  ChevronFirst,
  ChevronLast,
  ChevronLeft,
  ChevronRight,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
} from '@/components/ui/pagination';

export default function PaginationDemo() {
  return (
    <Card>
      <Pagination>
        <PaginationContent className="gap-0 [&_a]:rounded-none [&>li:not(:last-child)]:border-e [&>li:not(:last-child)]:border-border">
          <PaginationItem>
            <Button variant="ghost" mode="icon" size="sm" asChild disabled>
              <Link href="#">
                <ChevronFirst className="rtl:rotate-180" />
              </Link>
            </Button>
          </PaginationItem>
          <PaginationItem>
            <Button variant="ghost" mode="icon" size="sm" asChild disabled>
              <Link href="#">
                <ChevronLeft className="rtl:rotate-180" />
              </Link>
            </Button>
          </PaginationItem>
          <PaginationItem>
            <Button variant="ghost" mode="icon" size="sm" asChild>
              <Link href="#">1</Link>
            </Button>
          </PaginationItem>
          <PaginationItem>
            <Button
              variant="ghost"
              mode="icon"
              size="sm"
              selected={true}
              asChild
            >
              <Link href="#">2</Link>
            </Button>
          </PaginationItem>
          <PaginationItem>
            <Button variant="ghost" mode="icon" size="sm" asChild>
              <Link href="#">3</Link>
            </Button>
          </PaginationItem>
          <PaginationItem>
            <PaginationEllipsis />
          </PaginationItem>
          <PaginationItem>
            <Button variant="ghost" size="sm" mode="icon" asChild>
              <Link href="#">
                <ChevronRight className="rtl:rotate-180" />
              </Link>
            </Button>
          </PaginationItem>
          <PaginationItem>
            <Button variant="ghost" size="sm" mode="icon" asChild>
              <Link href="#">
                <ChevronLast className="rtl:rotate-180" />
              </Link>
            </Button>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </Card>
  );
}