"use client"

import * as React from "react"

export default function Slider() {
  const [value, setValue] = React.useState(50)

  return (
    <div className="grid w-full max-w-sm gap-4">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-zinc-900 dark:text-zinc-200">Volume</span>
        <span className="text-sm text-zinc-500 dark:text-zinc-400">{value}%</span>
      </div>
      <div className="relative flex w-full touch-none select-none items-center">
        <input
          type="range"
          min={0}
          max={100}
          value={value}
          onChange={(e) => setValue(Number(e.target.value))}
          className="h-2 w-full cursor-pointer appearance-none rounded-full bg-zinc-200 accent-zinc-900 dark:bg-zinc-800 dark:accent-zinc-50"
        />
      </div>
    </div>
  )
}