"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;
  nsfw: boolean;
}

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

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

      <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>

      {nsfw && (
        <div className="flex flex-col items-center gap-4 pt-8">
          <div className="flex items-center gap-2">
            <Switch id="animate" checked={revealed} onCheckedChange={setRevealed} />
            <Label htmlFor="animate">Reveal NSFW</Label>
          </div>
        </div>
      )}
    </div>
  );
}