Cards

"use client";
import { cn } from "@/lib/utils";
import { Feather } from "lucide-react";
import { motion } from "motion/react";
import React, { useState } from "react";

const CastingLightCard = () => {
  const [isOn, setIsOn] = useState(true);

  return (
    <div className={cn("flex items-center justify-center p-10")}>
      <div
        className={cn(
          "relative flex h-[500px] w-[340px] flex-col rounded-md",
          "border border-white/5 shadow-2xl",
          "bg-zinc-900",
        )}
      >
        {/* --- TOP SECTION (LIGHT & ICON) --- */}
        <div
          className={cn(
            "relative flex h-[60%] w-full items-end justify-center",
          )}
        >
          {/* ICON SHADOW */}
          <motion.div
            animate={{
              opacity: isOn ? 1 : 0,
              scaleY: isOn ? 1.5 : 0.5,
            }}
            transition={{ duration: 0.4 }}
            className={cn(
              "absolute top-[10%] left-1/2 z-10 h-24 w-24 -translate-x-1/2 bg-black blur-lg",
            )}
          />
          {/* The Icon */}
          <div
            className={cn(
              "absolute top-1/2 left-1/2 z-20 flex -translate-x-1/2 -translate-y-[40%] items-center justify-center",
              "h-16 w-16 rounded-[20px] bg-white/10 backdrop-blur-sm",
              "border border-white/10 shadow-lg",
            )}
          >
            <Feather
              className={cn(
                `h-8 w-8 ${isOn ? "text-neutral-300" : "text-neutral-900"}`,
              )}
            />
          </div>

          {/* The Light Beam */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: isOn ? 1 : 0 }}
            transition={{ duration: 0.4, ease: "easeOut" }}
            className={cn(
              "pointer-events-none absolute bottom-0 z-10 h-[300px] w-full",
              // Gradient starting from bottom (at the bar) and fading up
              "bg-[radial-gradient(ellipse_at_bottom,rgba(255,255,255,0.5)_0%,transparent_70%)]",
            )}
          />

          {/* The Tubelight Bar */}
          <motion.div
            animate={{
              backgroundColor: isOn ? "#ffffff" : "#404040",
              boxShadow: isOn
                ? "0px -2px 10px rgba(255,255,255,1), 0px 0px 20px rgba(255,255,255,0.6)"
                : "0px 0px 0px rgba(0,0,0,0)",
            }}
            transition={{ duration: 0.3 }}
            className={cn("h-[3px] w-[280px] rounded-full")}
          />
        </div>

        {/* --- BOTTOM SECTION (CONTENT) --- */}
        <div className={cn("flex h-[40%] flex-col justify-between px-8 py-6")}>
          {/* Text Content */}
          <div className={cn("flex flex-col gap-1")}>
            <p className={cn(`text-lg leading-relaxed text-neutral-300`)}>
              batti gull <br />
              meter chaalu ⚡
            </p>
          </div>

          {/* Controls */}
          <div className={cn("flex items-end justify-between")}>
            {/* Toggle Switch */}
            <div
              className={cn(
                "relative flex h-[36px] w-[72px] cursor-pointer items-center rounded-full p-1",
                "bg-linear-to-b from-zinc-200 to-zinc-400 shadow-inner",
                "border-[0.5px] border-zinc-500",
              )}
              onClick={() => setIsOn(!isOn)}
            >
              {/* Inner track */}
              <div
                className={cn(
                  "absolute inset-[2px] rounded-full bg-linear-to-b from-zinc-800 to-zinc-900 shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)]",
                )}
              />

              {/* The Knob */}
              <motion.div
                className={cn(
                  "relative z-10 size-7 rounded-full",
                  "bg-linear-to-b from-zinc-100 to-zinc-300",
                  "border border-zinc-300",
                  "shadow-[0_2px_4px_rgba(0,0,0,0.5),inset_0_1px_1px_rgba(255,255,255,1)]",
                )}
                animate={{ x: isOn ? 36 : 0 }}
                transition={{ type: "spring", stiffness: 600, damping: 40 }}
              ></motion.div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CastingLightCard;