import { PropTypes } from "prop-types";
import clsx from "clsx";

function FormBox({ title, children, alt = false }) {
  return (
    <form
      className={clsx(
        alt
          ? "bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark"
          : "bg-surface-variant dark:bg-surface-variant-dark",
        "transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full"
      )}
    >
      <label
        className={clsx(
          alt &&
            "bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark",
          "font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full z-20"
        )}
      >
        {title}
      </label>
      {children}
    </form>
  );
}

FormBox.propTypes = {
  children: PropTypes.node.isRequired,
  title: PropTypes.string.isRequired,
  alt: PropTypes.bool,
};

export default FormBox;