'use client';
import { useState } from 'react';
import { motion } from 'framer-motion';
import { ChevronLeft, ChevronRight } from 'lucide-react';

export default function SimplePagination() {
  const [page, setPage] = useState(1);
  const totalPages = 5;
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

  return (
    <div className="flex items-center justify-center p-10 bg-neutral-50 dark:bg-neutral-950 rounded-xl">
      <div className="flex items-center gap-1 p-1 bg-white dark:bg-neutral-900 rounded-xl shadow-sm border border-neutral-100 dark:border-neutral-800">
        <button
          onClick={() => setPage(p => Math.max(1, p - 1))}
          disabled={page === 1}
          className="p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 transition-colors"
        >
          <ChevronLeft size={16} className="text-neutral-600 dark:text-neutral-400" />
        </button>

        <div className="flex items-center relative">
            {pages.map((p) => (
                <button
                    key={p}
                    onClick={() => setPage(p)}
                    className={`relative w-8 h-8 flex items-center justify-center text-sm font-medium rounded-lg z-10 transition-colors ${page === p ? 'text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
                >
                    {page === p && (
                        <motion.div
                            layoutId="active-pagination"
                            className="absolute inset-0 bg-indigo-500 rounded-lg -z-10"
                            transition={{ type: "spring", stiffness: 400, damping: 30 }}
                        />
                    )}
                    {p}
                </button>
            ))}
        </div>

        <button
          onClick={() => setPage(p => Math.min(totalPages, p + 1))}
          disabled={page === totalPages}
          className="p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 transition-colors"
        >
          <ChevronRight size={16} className="text-neutral-600 dark:text-neutral-400" />
        </button>
      </div>
    </div>
  );
}