"use client"

import { useShadow } from "@/contexts/shadow-context"
import { Card } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { useTheme } from "next-themes"

export function ShadowControl() {
  const { shadowDepth, setShadowDepth } = useShadow()
  const { theme } = useTheme()

  return (
    <div className="p-4">
      <h3 className="text-sm font-medium text-muted-foreground mb-2">Shadow Depth</h3>

      <RadioGroup value={shadowDepth} onValueChange={(value) => setShadowDepth(value as any)}>
        <div className="flex gap-2">
          {(["none", "subtle", "medium", "pronounced"] as const).map((depth) => (
            <div key={depth} className="flex flex-col items-center">
              <Card
                className={`h-10 w-10 cursor-pointer transition-all relative group ${
                  shadowDepth === depth ? "ring-2 ring-primary" : "border border-border"
                }`}
                style={{
                  boxShadow: getShadowPreview(depth, theme === "dark"),
                }}
              >
                <RadioGroupItem value={depth} id={`shadow-${depth}`} className="sr-only" />
              </Card>
              <Label htmlFor={`shadow-${depth}`} className="mt-1 text-xs capitalize cursor-pointer">
                {depth}
              </Label>
            </div>
          ))}
        </div>
      </RadioGroup>
    </div>
  )
}

// Helper function to get shadow preview values
function getShadowPreview(depth: string, isDark: boolean): string {
  const shadowValues = {
    none: {
      light: "none",
      dark: "none",
    },
    subtle: {
      light: "0 1px 2px rgba(0, 0, 0, 0.05)",
      dark: "0 1px 2px rgba(0, 0, 0, 0.15)",
    },
    medium: {
      light: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
      dark: "0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15)",
    },
    pronounced: {
      light: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)",
      dark: "0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15)",
    },
  }

  return isDark
    ? shadowValues[depth as keyof typeof shadowValues].dark
    : shadowValues[depth as keyof typeof shadowValues].light
}