import React, { useState } from "react";
import { Link } from "react-router-dom";
import AdminHeader from "../components/admin-header";
import Sidebar from "../components/sidebar";

const items = [
  { id: 1, label: "کاربران جدید", href: "/users?status=pending" },
  { id: 2, label: "پست‌های جدید", href: "/posts?status=pending" },
  { id: 3, label: "بیلبورد جدید", href: "/vitrine?status=pending" },
  { id: 4, label: "نظرات جدید", href: "/comments?status=pending" },
  { id: 5, label: "تیکت جدید", href: "/tickets?status=pending" },
  { id: 6, label: "نظرات بیلبورد جدید", href: "/vitrine-comments?status=pending" },
];

const Dashboard = () => {
  const [active, setActive] = useState(null);

  return (
    <>
      
      <div className="min-h-screen mx-auto bg-gray-900">
        <div className="flex h-full w-full">
        <div className="  w-64"><Sidebar /></div>

          <div className="w-full h-full p-12 mb-11 mx-auto text-white">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {items.map((item) => (
                <Link
                  key={item.id}
                  to={item.href}
                  onClick={() => setActive(item.id)}
                  className={`cursor-pointer rounded-xl border p-6 shadow-md transition block
                    ${
                      active === item.id
                        ? "bg-cyan-600 text-white font-bold shadow-lg scale-105"
                        : "bg-[#232a31] hover:bg-[#2a3036] text-gray-200"
                    }`}
                >
                  {item.label}
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Dashboard;
