"use client"

import { Color, ImageColor, ImageVariant } from "@/generated/prisma";
import { useState } from "react";
import { Label } from "../ui/label";
import { Switch } from "../ui/switch";
import GlowingImageBorder from "./GlowingImageBorder";

type Props = {
  variant: ImageVariant;
  colors: (ImageColor & { color: Color })[];
  alt: string;
  src: string;
};

export default function GlowingImageWithToggle({ variant, colors, alt, src }: Props) {
  const [animate, setAnimate] = useState(true);

  return (
    <div className="relative w-full max-w-fit">
      <GlowingImageBorder
        alt={alt}
        variant={variant}
        colors={colors}
        src={src}
        animate={animate}
      />

      <div className="flex flex-col items-center gap-4 pt-8">
        <div className="flex items-center gap-2">
          <Switch id="animate" checked={animate} onCheckedChange={setAnimate} />
          <Label htmlFor="animate">Animate glow</Label>
        </div>
      </div>
    </div>
  );
}
