"use client"

import { useState } from "react"
import { Slider } from "@/components/ui/slider"
import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"

export function SliderSection() {
  const [singleValue, setSingleValue] = useState([50])
  const [rangeValue, setRangeValue] = useState([25, 75])
  const [stepValue, setStepValue] = useState([20])

  return (
    <section id="slider" className="scroll-mt-16">
      <SectionHeading title="Slider" description="An input where the user selects a value from within a given range." />

      <div className="space-y-8">
        <ComponentContainer
          title="Default Slider"
          description="A simple slider with a single value."
          code={`import { Slider } from "@/components/ui/slider"
import { useState } from "react"

export function SliderDemo() {
  const [value, setValue] = useState([50])
  
  return (
    <div className="w-full max-w-sm min-w-[240px]">
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        step={1}
        className="w-full"
      />
      <div className="flex justify-between text-sm text-muted-foreground mt-2">
        <span>0</span>
        <span>Value: {value[0]}</span>
        <span>100</span>
      </div>
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="w-full max-w-sm min-w-[240px]">
              <Slider value={singleValue} onValueChange={setSingleValue} max={100} step={1} className="w-full" />
              <div className="flex justify-between text-sm text-muted-foreground mt-2">
                <span>0</span>
                <span>Value: {singleValue[0]}</span>
                <span>100</span>
              </div>
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Range Slider"
          description="A slider with two handles for selecting a range."
          code={`import { Slider } from "@/components/ui/slider"
import { useState } from "react"

export function RangeSliderDemo() {
  const [value, setValue] = useState([25, 75])
  
  return (
    <div className="w-full max-w-sm min-w-[240px]">
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        step={1}
        className="w-full"
      />
      <div className="flex justify-between text-sm text-muted-foreground mt-2">
        <span>Min: {value[0]}</span>
        <span>Max: {value[1]}</span>
      </div>
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="w-full max-w-sm min-w-[240px]">
              <Slider value={rangeValue} onValueChange={setRangeValue} max={100} step={1} className="w-full" />
              <div className="flex justify-between text-sm text-muted-foreground mt-2">
                <span>Min: {rangeValue[0]}</span>
                <span>Max: {rangeValue[1]}</span>
              </div>
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Step Slider"
          description="A slider with defined steps."
          code={`import { Slider } from "@/components/ui/slider"
import { useState } from "react"

export function StepSliderDemo() {
  const [value, setValue] = useState([20])
  
  return (
    <div className="w-full max-w-sm min-w-[240px]">
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        step={10}
        className="w-full"
      />
      <div className="flex justify-between text-sm text-muted-foreground mt-2">
        <span>0</span>
        <span>Value: {value[0]} (Step: 10)</span>
        <span>100</span>
      </div>
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="w-full max-w-sm min-w-[240px]">
              <Slider value={stepValue} onValueChange={setStepValue} max={100} step={10} className="w-full" />
              <div className="flex justify-between text-sm text-muted-foreground mt-2">
                <span>0</span>
                <span>Value: {stepValue[0]} (Step: 10)</span>
                <span>100</span>
              </div>
            </div>
          </div>
        </ComponentContainer>
      </div>
    </section>
  )
}