import { Checkbox } from '@geckoui/geckoui';

import { useState } from 'react';

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
}

import { useState } from 'react';

function CheckboxWithLabel() {
  const [agreed, setAgreed] = useState(false);

  return (
    <label className="flex items-center gap-2 cursor-pointer">
      <Checkbox
        checked={agreed}
        onChange={(e) => setAgreed(e.target.checked)}
      />
      <span>I agree to the terms and conditions</span>
    </label>
  );
}

import { useState } from 'react';

function SelectAll() {
  const [items, setItems] = useState([
    { id: 1, checked: false },
    { id: 2, checked: false },
    { id: 3, checked: false },
  ]);

  const allChecked = items.every(item => item.checked);
  const someChecked = items.some(item => item.checked);

  const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
    setItems(items.map(item => ({ ...item, checked: e.target.checked })));
  };

  return (
    <div>
      <label className="flex items-center gap-2">
        <Checkbox
          checked={someChecked || allChecked}
          partial={someChecked && !allChecked}
          onChange={handleSelectAll}
        />
        <span>Select All</span>
      </label>
      {/* Individual items... */}
    </div>
  );
}

<div className="space-y-2">
  <Checkbox checked disabled />
  <Checkbox disabled />
</div>

function NotificationSettings() {
  const [settings, setSettings] = useState({
    email: true,
    sms: false,
    push: true,
  });

  return (
    <div className="space-y-3">
      <label className="flex items-center gap-2">
        <Checkbox
          checked={settings.email}
          onChange={(e) => setSettings({...settings, email: e.target.checked})}
        />
        <span>Email notifications</span>
      </label>
      {/* Other checkboxes... */}
    </div>
  );
}