Toggle

"use client";

import { Toggle } from "@/components/ui/toggle/toggle";

function UnlockIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
      <path d="M7 11V7a5 5 0 0 1 9.9-1" />
    </svg>
  );
}

function LockIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
    </svg>
  );
}

export default function ToggleDemo() {
  return (
    <Toggle
      aria-label="Toggle lock"
      render={(props, state) => {
        if (state.pressed) {
          return (
            <button type="button" {...props}>
              <LockIcon />
            </button>
          );
        }

        return (
          <button type="button" {...props}>
            <UnlockIcon />
          </button>
        );
      }}
    />
  );
}