Apple 26 Toggle

"use client"

import { useState } from "react"
import { Toggle, Filter } from "@/components/ui/toggle"

export default function ToggleDemo() {
  const [notifications, setNotifications] = useState(true)
  const [darkMode, setDarkMode] = useState(false)
  const [sound, setSound] = useState(true)

  return (
    <div className="mx-auto flex min-h-screen max-w-md flex-col items-center justify-center gap-8 p-8">
      <Filter />

      <div className="space-y-2 text-center">
        <h1 className="text-2xl font-bold">IOS style Toggle Switch</h1>
      </div>

      <div className="w-full space-y-6 rounded-xl border p-6">
        <div className="flex items-center gap-4">
          <div className="flex flex-1 flex-col gap-1">
            <p className="font-medium">Notifications</p>
            <p className="text-sm text-muted-foreground">
              Receive push notifications
            </p>
          </div>

          <Toggle
            checked={notifications}
            onCheckedChange={setNotifications}
          />
        </div>

        <div className="flex items-center gap-4">
          <div className="flex flex-1 flex-col gap-1">
            <p className="font-medium">Dark Mode</p>
            <p className="text-sm text-muted-foreground">
              Use dark theme
            </p>
          </div>

          <Toggle
            checked={darkMode}
            onCheckedChange={setDarkMode}
          />
        </div>

        <div className="flex items-center gap-4">
          <div className="flex flex-1 flex-col gap-1">
            <p className="font-medium">Sound</p>
            <p className="text-sm text-muted-foreground">
              Play sounds for alerts
            </p>
          </div>

          <Toggle
            checked={sound}
            onCheckedChange={setSound}
          />
        </div>

        <div className="flex items-center gap-4 opacity-60">
          <div className="flex flex-1 flex-col gap-1">
            <p className="font-medium">Sync</p>
            <p className="text-sm text-muted-foreground">
              Disabled toggle
            </p>
          </div>

          <Toggle checked={false} disabled />
        </div>
      </div>
    </div>
  )
}