import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import React, { ButtonHTMLAttributes, ReactNode } from "react";

type TSetAsButtonProps = {
  children: ReactNode;
  selected: boolean;
} & ButtonHTMLAttributes<HTMLButtonElement>;

const SetAsButton = ({
  children,
  selected,
  ...props
}: TSetAsButtonProps) => {

  return (
    <Button
      className={cn(
        "border w-[97px] h-[36px] gap-2 rounded-[54px] pt-2 pr-4 pb-2 pl-4 text-[14px] leading-[140%]",
        selected
          ? "border-main-color bg-main-color text-neutral-white hover:bg-main-color/90"
          : "border-[#E9E9E9] bg-transparent text-[#333333] hover:bg-transparent hover:text-[#333333]"
      )}
      type='button'
      {...props}
    >
      {children}
    </Button>
  );
};

export default SetAsButton;