import * as React from "react";

import { Label } from "./Label";
import { Input, InputProps } from "./Input";
import { Button, ButtonProps } from "./Button";
import { cn } from "../lib/utils";

interface InputGroupProps {
  inputId: string;
  label: string;
  helperText: string;
  submitButtonLabel: string;
  disabled?: boolean;
  inputProps: Omit<InputProps, "disabled" | "id">;
  buttonProps: Omit<ButtonProps, "disabled " | "asChild">;
}

const InputGroup: React.FC<InputGroupProps> = ({
  inputId = "input_primary",
  label = "Label",
  helperText = "HelperText",
  submitButtonLabel = "Submit",
  disabled = false,
  inputProps = { placeholder: "Input Placeholder" },
  buttonProps = {}
}) => {
  return (
    <section
      className={cn(
        "tw-figr-flex tw-figr-flex-col tw-figr-gap-xs tw-figr-font-secondary ",
        `${disabled ? "tw-figr-text-neutral-500" : "tw-figr-text-base-black"}`
      )}
    >
      <Label htmlFor={inputId} className="tw-figr-text-desktop-caption-accent">
        {label}
      </Label>

      <div className="tw-figr-text-desktop-content-regular tw-figr-flex tw-figr-gap-s">
        <Input id={inputId} disabled={disabled} {...inputProps} />
        <Button disabled={disabled} {...buttonProps}>
          {submitButtonLabel}
        </Button>
      </div>

      <p className={`${disabled ? "" : "tw-figr-text-neutral-700"}`}>
        {helperText}
      </p>
    </section>
  );
};

export { InputGroup, InputGroupProps };