import React from "react";
import { Link, usePage } from "@inertiajs/react";
import {
  Flame,
  Heart,
  Rows3,
  Radio,
  Club,
  Fish,
  Trophy,
  Gamepad2,
  Ticket,
} from "lucide-react";

export default function GameCategorySlider() {
  const currentUrl = usePage().url;

  const categories = [
    { label: "HOT GAMES", icon: Flame, href: "/hot-games" },
    { label: "FAVORITES", icon: Heart, href: "/favorites" },
    { label: "SLOTS", icon: Rows3, href: "/slots" },
    { label: "LIVE", icon: Radio, href: "/live-casino" },
    { label: "POKER", icon: Club, href: "/poker" },
    { label: "FISH", icon: Fish, href: "/fish" },
    { label: "SPORTS", icon: Trophy, href: "/sports" },
    { label: "E-SPORTS", icon: Gamepad2, href: "/e-sports" },
    { label: "LOTTERY", icon: Ticket, href: "/lottery" },
  ];

  return (
    <>
      <div className="category-wrap">
        <div className="category-slider">
          {categories.map((item, index) => {
            const Icon = item.icon;
            const active = currentUrl === item.href;

            return (
              <Link
                key={index}
                href={item.href}
                className={`category-btn ${active ? "active" : ""}`}
              >
                <Icon size={14} strokeWidth={2.2} />
                <span>{item.label}</span>
              </Link>
            );
          })}
        </div>
      </div>

      <style jsx>{`
        .category-wrap {
          width: 100%;
          padding: 6px 0;
          overflow: hidden;
        }

        .category-slider {
          display: flex;
          align-items: center;
          gap: 10px;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 0 10px;
          scrollbar-width: none;
          -ms-overflow-style: none;
          white-space: nowrap;
        }

        .category-slider::-webkit-scrollbar {
          display: none;
        }

        .category-btn {
          flex: 0 0 auto;
          height: 36px;
          padding: 0 16px;
          border: 1px solid rgba(10, 33, 39, 0.7);
          border-radius: 10px;
          background: linear-gradient(180deg, #0b4b57 0%, #083c47 100%);
          color: #eafcff;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          font-size: 13px;
          font-weight: 700;
          cursor: pointer;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 2px 6px rgba(0, 0, 0, 0.22);
          transition: all 0.2s ease;
          white-space: nowrap;
          text-transform: uppercase;
          letter-spacing: 0.2px;
          text-decoration: none;
        }

        .category-btn.active {
          background: linear-gradient(180deg, #167283 0%, #0c5361 100%);
          border-color: rgba(72, 220, 255, 0.35);
          color: #ffffff;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 0 1px rgba(76, 214, 255, 0.08),
            0 4px 10px rgba(0, 0, 0, 0.28);
        }

        .category-btn span {
          line-height: 1;
        }
      `}</style>
    </>
  );
}