"use client";

import Image from "next/image";
import { cn } from "@/lib/utils";

interface DualshockControllerProps {
  className?: string;
  ledOn?: boolean;
}

export default function DualshockController({
  className = "",
  ledOn = true,
}: DualshockControllerProps) {
  return (
    <div
      className={cn(
        "flex min-h-[480px] w-full items-center justify-center bg-[#0f0f0f] p-8",
        className
      )}
    >
      {/* Raised shell */}
      <div className="relative w-full max-w-[640px] rounded-[24px] bg-gradient-to-b from-[#202020] to-[#191919] p-6 shadow-[0_1px_0.5px_#ffffff1a_inset,0_1px_2px_#ffffff35_inset,0_10px_10px_-9px_#00000070,0_20px_20px_-14px_#00000060,0_0px_6px_0px_#00000060] transition-transform duration-150 active:scale-[0.97]">
        {/* Inset well */}
        <div className="rounded-[18px] bg-[#0c0c0e] p-4 shadow-[0_0.5px_0_#ffffff50,0_2px_6px_#00000090_inset]">
          <div className="relative">
            <Image
              src="/dualshock-premium.svg"
              alt="Premium skeuomorphic game controller"
              width={1000}
              height={1000}
              className="h-auto w-full select-none"
              draggable={false}
              priority
            />
            {/* Restrained LED glow */}
            <div
              className={cn(
                "pointer-events-none absolute left-1/2 top-[9%] h-[6px] w-[34%] -translate-x-1/2 rounded-full bg-[#3d8bff] blur-[6px] transition-opacity duration-300",
                ledOn ? "opacity-60" : "opacity-0"
              )}
            />
          </div>
        </div>

        <div className="mt-3 flex items-center justify-between px-1">
          <span className="text-[11px] font-medium uppercase tracking-[0.2em] text-white/40">
            Dualshock · Premium
          </span>
          <span
            className={cn(
              "h-1.5 w-1.5 rounded-full transition-colors",
              ledOn ? "bg-[#5ebbff] shadow-[0_0_8px_2px_#3d8bff80]" : "bg-white/15"
            )}
          />
        </div>
      </div>
    </div>
  );
}
DualShock Controller
