"use client";
/*
 * Documentation:
 * Checkbox Card — https://app.subframe.com/f023064a5ca0/library?component=Checkbox+Card_de0b4dfb-3946-4702-be52-5678dd71925a
 */

import React from "react";
import { FeatherCheck } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface CheckboxCardRootProps
  extends React.ComponentProps<typeof SubframeCore.Checkbox.Root> {
  disabled?: boolean;
  checked?: boolean;
  showCheckbox?: boolean;
  children?: React.ReactNode;
  onCheckedChange?: (checked: boolean) => void;
  className?: string;
}

const CheckboxCardRoot = React.forwardRef<
  HTMLButtonElement,
  CheckboxCardRootProps
>(function CheckboxCardRoot(
  {
    disabled = false,
    checked = false,
    showCheckbox = false,
    children,
    className,
    ...otherProps
  }: CheckboxCardRootProps,
  ref
) {
  return (
    <SubframeCore.Checkbox.Root
      checked={checked}
      disabled={disabled}
      asChild={true}
      {...otherProps}
    >
      <button
        className={SubframeUtils.twClassNames(
          "group/de0b4dfb flex cursor-pointer items-center gap-4 rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-2 py-2 text-left hover:bg-surface-neutral-tertiary aria-[checked=true]:border aria-[checked=true]:border-solid aria-[checked=true]:border-brand-brand-secondary-border-subtle-default aria-[checked=true]:bg-surface-ui-subtle-blue-default hover:aria-[checked=true]:bg-surface-ui-subtle-blue-hover disabled:cursor-default disabled:border disabled:border-solid disabled:border-border-disabled disabled:bg-surface-neutral-disabled hover:disabled:cursor-default hover:disabled:bg-surface-neutral-disabled",
          className
        )}
        ref={ref}
      >
        <div
          className={SubframeUtils.twClassNames(
            "hidden h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid border-border-strong bg-surface-neutral-secondary group-aria-[checked=true]/de0b4dfb:border-2 group-aria-[checked=true]/de0b4dfb:border-solid group-aria-[checked=true]/de0b4dfb:border-brand-brand-border-solid-default group-aria-[checked=true]/de0b4dfb:bg-brand-brand-surface-solid-default group-disabled/de0b4dfb:border-2 group-disabled/de0b4dfb:border-solid group-disabled/de0b4dfb:border-border-disabled group-disabled/de0b4dfb:bg-surface-neutral-disabled",
            { flex: showCheckbox }
          )}
        >
          <FeatherCheck className="hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid group-aria-[checked=true]/de0b4dfb:inline-flex group-disabled/de0b4dfb:text-icon-neutral-disabled" />
        </div>
        {children ? (
          <div className="flex grow shrink-0 basis-0 items-center gap-4">
            {children}
          </div>
        ) : null}
      </button>
    </SubframeCore.Checkbox.Root>
  );
});

export const CheckboxCard = CheckboxCardRoot;