"use client"

import { useState, useEffect } from "react"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"

export function TypographyControl() {
  const [fontWeight, setFontWeight] = useState(400)
  const [lineHeight, setLineHeight] = useState(1.5)
  const [letterSpacing, setLetterSpacing] = useState(0)

  useEffect(() => {
    if (typeof window === "undefined") return

    const root = document.documentElement

    // Set CSS variables
    root.style.setProperty("--font-weight-base", fontWeight.toString())
    root.style.setProperty("--line-height-base", lineHeight.toString())
    root.style.setProperty("--letter-spacing-base", `${letterSpacing}em`)
  }, [fontWeight, lineHeight, letterSpacing])

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

      <div className="space-y-4">
        {/* Font Weight */}
        <div className="space-y-2">
          <div className="flex justify-between">
            <Label htmlFor="font-weight" className="text-xs">
              Font Weight
            </Label>
            <span className="text-xs text-muted-foreground">{fontWeight}</span>
          </div>
          <Slider
            id="font-weight"
            min={300}
            max={700}
            step={100}
            value={[fontWeight]}
            onValueChange={(value) => setFontWeight(value[0])}
          />
          <div className="flex justify-between text-[10px] text-muted-foreground">
            <span>Light</span>
            <span>Regular</span>
            <span>Bold</span>
          </div>
        </div>

        {/* Line Height */}
        <div className="space-y-2">
          <div className="flex justify-between">
            <Label htmlFor="line-height" className="text-xs">
              Line Height
            </Label>
            <span className="text-xs text-muted-foreground">{lineHeight.toFixed(1)}</span>
          </div>
          <Slider
            id="line-height"
            min={1.1}
            max={2}
            step={0.1}
            value={[lineHeight]}
            onValueChange={(value) => setLineHeight(value[0])}
          />
          <div className="flex justify-between text-[10px] text-muted-foreground">
            <span>Tight</span>
            <span>Normal</span>
            <span>Loose</span>
          </div>
        </div>

        {/* Letter Spacing */}
        <div className="space-y-2">
          <div className="flex justify-between">
            <Label htmlFor="letter-spacing" className="text-xs">
              Letter Spacing
            </Label>
            <span className="text-xs text-muted-foreground">
              {letterSpacing === 0 ? "Normal" : letterSpacing > 0 ? `+${letterSpacing}em` : `${letterSpacing}em`}
            </span>
          </div>
          <Slider
            id="letter-spacing"
            min={-0.05}
            max={0.1}
            step={0.01}
            value={[letterSpacing]}
            onValueChange={(value) => setLetterSpacing(value[0])}
          />
          <div className="flex justify-between text-[10px] text-muted-foreground">
            <span>Tighter</span>
            <span>Normal</span>
            <span>Wider</span>
          </div>
        </div>
      </div>
    </div>
  )
}