Switch

"use client"

import { useState } from "react"
import { Switch } from "@/components/ui/interfaces-switch"

export default function SwitchWithFormDemo() {
  const [notifications, setNotifications] = useState(true)
  const [marketing, setMarketing] = useState(false)
  const [security, setSecurity] = useState(true)

  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
      <div className="w-full max-w-sm rounded-xl border bg-background p-6 shadow-sm space-y-4">
        <div>
          <h3 className="text-base font-semibold">Notifications</h3>
          <p className="text-muted-foreground text-sm">Manage your notification settings.</p>
        </div>
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <label htmlFor="notif" className="text-sm font-medium cursor-pointer">Push Notifications</label>
            <Switch id="notif" checked={notifications} onCheckedChange={setNotifications} />
          </div>
          <div className="flex items-center justify-between">
            <label htmlFor="mkt" className="text-sm font-medium cursor-pointer">Marketing Emails</label>
            <Switch id="mkt" checked={marketing} onCheckedChange={setMarketing} />
          </div>
          <div className="flex items-center justify-between">
            <label htmlFor="sec" className="text-sm font-medium cursor-pointer">Security Alerts</label>
            <Switch id="sec" checked={security} onCheckedChange={setSecurity} />
          </div>
        </div>
      </div>
    </div>
  )
}