import React from "react";
import { cn } from "../../lib/cn";

interface ButtonProps {
  disabled?: boolean;
  text?: string;
  className?: string;
  onClick: () => void;
  children?: React.ReactNode;
}

export const PrimaryButton: React.FC<ButtonProps> = ({
  disabled = false,
  text = "",
  className,
  onClick,
  children,
}) => {
  return (
    <label
      className={cn(
        "grid relative cursor-pointer select-none group w-fit box-border",
        disabled && "pointer-events-none",
        className
      )}
    >
      {/* Основной контейнер,  */}
      <div
        className={cn(
          "group-active:scale-90 flex items-center justify-center box-border z-10 relative transition-all duration-300",
          "rounded-[10px]",
          "group-hover:bg-liquid-lighter group-hover:ring-[1px] group-hover:ring-liquid-darkmain group-hover:ring-inset",
          "px-[16px] py-[8px]",
          "bg-liquid-darkmain",
          disabled && "bg-liquid-lighter"
        )}
      >
        {/* Скрытый button */}
        <button
          className={cn(
            "absolute opacity-0 -z-10 h-0 w-0",
            "[&:focus-visible+*]:outline-liquid-brightmain",
          )}
          disabled={disabled}
          onClick={() => { onClick() }}
        />

        {/* Граница при выделении через tab */}
        <div
          className={cn(
            "absolute outline-offset-[2.5px] border-[2px] border-transparent outline-[2.5px] outline outline-transparent transition-all duration-300 text-transparent box-border text-[18px] font-bold p-0 ,m-0 leading-[23px]",
            "rounded-[10px]",
            "px-[16px] py-[8px]",
          )}
        >
          {children || text}
        </div>
        <div
          className={cn(
            "transition-all duration-300 text-liquid-white text-[18px] font-bold p-0 m-0 leading-[23px]",
            "group-hover:text-liquid-brightmain ",
            disabled && "text-liquid-light"
          )}
        >
          {children || text}
        </div>
      </div>
    </label>
  );
};