"use client";

import { Button, ButtonProps } from "@heroui/react";
import { tv } from "tailwind-variants";

const borderedButtonStyles = tv({
  slots: {
    base: "rounded-xl border border-[#E5E7EB] dark:border-gray-600 flex items-center justify-center",
    button: "w-full h-full rounded-xl px-6 text-body-small font-bold border-none",
  },
  variants: {
    size: {
      md: {
        base: "h-10",
      },
      lg: {
        base: "h-11",
      },
    },
    fullWidth: {
      true: {
        base: "w-full",
      },
    },
    isTheme: {
      true: {
        button: "bg-white dark:bg-gray-800 text-text-primary dark:text-white",
      },
    },
  },
  defaultVariants: {
    size: "md",
    isTheme: false,
  },
});

interface BorderedButtonProps extends ButtonProps {
  size?: "md" | "lg";
  fullWidth?: boolean;
  isTheme?: boolean;
}

export default function BorderedButton({
  size = "md",
  fullWidth = false,
  isTheme = false,
  className,
  ...props
}: BorderedButtonProps) {
  const { base, button } = borderedButtonStyles({ size, fullWidth, isTheme });

  return (
    <div className={base({ className })}>
      <Button
        className={button()}
        {...props}
      >
        {props.children}
      </Button>
    </div>
  );
}