import { ComponentProps } from "react";
import React from "react";

type ButtonProps = ComponentProps<"button"> & {
  title: string;
  mode?: "DARK" | "LIGHT";
  icon?: React.ReactElement;
};

export default function Button({
  title,
  mode = "LIGHT",
  icon,
  ...props
}: ButtonProps) {
  return (
    <button
      {...props}
      className={`${mode == "LIGHT" ? "bg-slate-400 dark:bg-slate-800 border-slate-800 hover:bg-slate-500" : "bg-gray-400 dark:bg-slate-900 dark:border-slate-900 border-slate-400 hover:bg-slate-600"} flex flex-row items-center border-4 border-double cursor-pointer font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out`}
    >
      {title}
      {icon}
    </button>
  );
}