Glow Rig

"use client"

import { useState } from "react"

import {
  GlowRig,
  type RigPosition,
} from "@/components/glow/glow-rig"
import { GrainVeil } from "@/components/texture/grain-veil"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

// Every word on the page. Change copy here, not in the markup.
const COPY = {
  lamp: "Lamp",
} as const

const POSITIONS: { value: RigPosition; label: string }[] = [
  { value: "top-left", label: "Left" },
  { value: "overhead", label: "Center" },
  { value: "top-right", label: "Right" },
]

// The rig is the lamp, the ground is the wall; the toggle moves the lamp.
export default function GlowRigDemo() {
  const [position, setPosition] = useState<RigPosition>("overhead")
  return (
    <div className="dark relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background text-foreground">
      <GlowRig position={position} />
      <GrainVeil blend="overlay" opacity={0.15} />
      <ToggleGroup
        aria-label={COPY.lamp}
        value={[position]}
        onValueChange={(values) => {
          const next = POSITIONS.find((p) => p.value === values[0])
          if (next) setPosition(next.value)
        }}
        className="relative z-10"
      >
        {POSITIONS.map(({ value, label }) => (
          <ToggleGroupItem key={value} value={value}>
            {label}
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
    </div>
  )
}