useBoolean

'use client'

import { useBoolean } from "@/components/hooks/use-boolean"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

export function UseBooleanDemo() {
  const { value, setValue, setTrue, setFalse, toggle } = useBoolean(false)

  return (
    <Card className="p-6 max-w-md mx-auto">
      <div className="space-y-6">
        <div className="flex items-center gap-2">
          <div className="text-sm font-medium">Current state:</div>
          <code className={`px-2 py-1 rounded-md ${
            value 
              ? 'bg-green-500/10 text-green-700 dark:text-green-400' 
              : 'bg-red-500/10 text-red-700 dark:text-red-400'
          }`}>
            {value.toString()}
          </code>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <Button 
            variant={value ? "default" : "outline"} 
            onClick={setTrue}
            className="w-full"
          >
            Set True
          </Button>
          
          <Button 
            variant={!value ? "default" : "outline"}
            onClick={setFalse}
            className="w-full"
          >
            Set False
          </Button>

          <Button 
            variant="secondary"
            onClick={toggle}
            className="w-full col-span-2"
          >
            Toggle Value
          </Button>

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

        <div className="text-sm text-muted-foreground">
          <p>This demo shows all the methods provided by useBoolean:</p>
          <ul className="list-disc list-inside mt-2 space-y-1">
            <li><code>value</code>: current boolean state</li>
            <li><code>setTrue()</code>: set to true</li>
            <li><code>setFalse()</code>: set to false</li>
            <li><code>toggle()</code>: toggle current value</li>
            <li><code>setValue()</code>: standard setState function</li>
          </ul>
        </div>
      </div>
    </Card>
  )
}