useToggle

'use client'

import { useToggle } from "@/components/hooks/use-toggle"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"

export function UseToggleDemo() {
  const [value, toggle, setValue] = useToggle(false)

  return (
    <Card className="p-6 max-w-md mx-auto">
      <div className="space-y-6">
        {/* Current State Display */}
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <div className="text-sm font-medium">Toggle State</div>
            <div className="text-sm text-muted-foreground">
              Current value: <code className="px-2 py-0.5 rounded bg-muted">{value.toString()}</code>
            </div>
          </div>
          <Switch
            checked={value}
            onCheckedChange={toggle}
            className="data-[state=checked]:bg-primary"
          />
        </div>

        <div className="grid grid-cols-2 gap-3">
          {/* Direct State Control */}
          <Button 
            variant={value ? "default" : "outline"}
            onClick={() => setValue(true)}
            className="w-full"
          >
            Set True
          </Button>
          
          <Button 
            variant={!value ? "default" : "outline"}
            onClick={() => setValue(false)}
            className="w-full"
          >
            Set False
          </Button>

          {/* Toggle Methods */}
          <Button 
            variant="secondary"
            onClick={toggle}
            className="w-full"
          >
            Toggle
          </Button>

          <Button 
            variant="secondary"
            onClick={() => setValue(prev => !prev)}
            className="w-full"
          >
            Custom Toggle
          </Button>
        </div>

        {/* Documentation */}
        <div className="text-sm text-muted-foreground border-t pt-4">
          <p className="font-medium mb-2">Hook Return Values:</p>
          <ul className="list-disc list-inside space-y-1">
            <li><code>value</code>: boolean state</li>
            <li><code>toggle()</code>: toggle function</li>
            <li><code>setValue()</code>: state setter</li>
          </ul>
        </div>

        {/* Example Code */}
        <div className="text-sm bg-muted p-3 rounded-md">
          <pre className="text-xs">
{`const [value, toggle, setValue] = useToggle(false)

// Basic toggle
toggle()

// Direct state control
setValue(true)
setValue(false)

// Custom toggle
setValue(prev => !prev)`}
          </pre>
        </div>
      </div>
    </Card>
  )
}