"use client";
/*
 * Documentation:
 * Checkbox Group — https://app.subframe.com/f023064a5ca0/library?component=Checkbox+Group_f9f1b596-c6b3-4d60-aa9a-f34b353f8aa5
 */

import React from "react";
import * as SubframeUtils from "../../utils";

export interface CheckboxGroupRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  label?: React.ReactNode;
  helpText?: React.ReactNode;
  error?: boolean;
  horizontal?: boolean;
  children?: React.ReactNode;
  className?: string;
}

const CheckboxGroupRoot = React.forwardRef<
  HTMLDivElement,
  CheckboxGroupRootProps
>(function CheckboxGroupRoot(
  {
    label,
    helpText,
    error = false,
    horizontal = false,
    children,
    className,
    ...otherProps
  }: CheckboxGroupRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/f9f1b596 flex flex-col items-start gap-2",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {label ? (
        <span className="text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
          {label}
        </span>
      ) : null}
      {children ? (
        <div
          className={SubframeUtils.twClassNames(
            "flex flex-col items-start gap-2",
            { "flex-row gap-6": horizontal }
          )}
        >
          {children}
        </div>
      ) : null}
      {helpText ? (
        <span
          className={SubframeUtils.twClassNames(
            "text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary",
            { "text-text-feedback-negative": error }
          )}
        >
          {helpText}
        </span>
      ) : null}
    </div>
  );
});

export const CheckboxGroup = CheckboxGroupRoot;