"use client";

import { Checkbox } from "@aur-ui/ui/components/checkbox";
import { Label } from "@aur-ui/ui/components/label";

export default function CheckboxDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3">
        <div className="flex items-center gap-2">
          <Checkbox id="newsletter" defaultChecked />
          <Label htmlFor="newsletter">Subscribe to the newsletter</Label>
        </div>
        <div className="flex items-center gap-2">
          <Checkbox id="select-all" checked="indeterminate" />
          <Label htmlFor="select-all">Select all (2 of 5)</Label>
        </div>
        <div className="flex items-center gap-2">
          <Checkbox id="terms-disabled" disabled />
          <Label htmlFor="terms-disabled" className="text-ink-400">
            Unavailable option
          </Label>
        </div>
      </div>
      <div className="flex items-start gap-2">
        <Checkbox id="terms" aria-invalid />
        <div className="grid gap-0.5">
          <Label htmlFor="terms">Accept terms and conditions</Label>
          <p className="text-xs text-danger">You must accept to continue.</p>
        </div>
      </div>
    </div>
  );
}