/**
 * @file Button.tsx
 * This component is a generic button component using tailwind.
 * You can include an optional icon.
 * You can pass the action to be done when the button is clicked using
 *    the onClick prop.
 *
 * Props:
 *
 * @param children: children
 * @param onClick: () => void
 *
 *
 */
import type { HTMLAttributes, JSX, ReactNode } from "react";

// this is a type declaration for the action prop.
// it is a function that takes a string as an argument and returns void.
export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  disabled?: boolean;
  onClick: () => void;
  className?: string;
}
export default function Button(props: ButtonProps): JSX.Element {
  return (
    <>
      <button
        onClick={props.onClick}
        className={`${props.className} rounded-sm border border-gray-300 bg-white px-4 py-1 text-black hover:bg-gray-50`}
        disabled={props.disabled}
      >
        {props.children}
      </button>
    </>
  );
}
