import CutCornerParentCard from "../global/CutCornerParentCard";
import RoundedTriangle from "../global/RoundedTriangle";
import { Button } from "../ui/button";
import { cn } from "@/lib/utils";
export default function ButtonCutCorner({
  buttonText,
  triangle = false,
  bgColor = "var(--primary)",
  btnClassName,
  onClick,
}: {
  buttonText?: string;
  triangle?: boolean;
  bgColor?: string;
  btnClassName?: string;
  onClick?: () => void;
}) {
  return (
    <div className="relative inline-block text-center group" onClick={onClick}>
      <CutCornerParentCard
        bottomRight
        borderColor={bgColor}
        backgroundColor={bgColor}
        size={25}
      >
        <Button
          className={cn(
            "rounded-[inherit] pl-4 pr-5 py-6 overflow-hidden relative",
            btnClassName,
          )}
        >
          <span className="relative inline-flex flex-col items-center justify-center">
            {/* متن اصلی: با هاور به سمت چپ و پایین می‌چرخد */}
            <span className="inline-block transition-all duration-300 ease-in-out origin-bottom group-hover:-translate-x-[150%] group-hover:translate-y-[60%] group-hover:-rotate-30">
              {buttonText}
            </span>

            {/* متن ثانویه: از سمت راست و پایین با چرخش وارد می‌شود */}
            <span className="absolute inline-block transition-all duration-300 ease-in-out origin-bottom translate-x-[150%] translate-y-[60%] rotate-30 group-hover:translate-x-0 whitespace-nowrap group-hover:translate-y-0 group-hover:rotate-0">
              {buttonText}
            </span>
          </span>
        </Button>
      </CutCornerParentCard>
      {triangle && (
        <RoundedTriangle
          className="
            absolute
            pointer-events-none
            bottom-0
            right-0
            translate-x-[42.5%]
            translate-y-[42.5%]
            scale-[0.17]
            bg-accent
            transition-transform duration-500
            group-hover:scale-[0.20] 
          "
        />
      )}
    </div>
  );
}
