import { cn } from "@/lib/utils";

interface CutCornerBoxProps {
  className?: string;
  backgroundColor?: string;
  width?: number | string;
  height?: number | string;
  borderColor?: string;
  cutSize?: number;
  as?: "div" | "button" | "section";
  onClick?: () => void;
}

export default function VerticalCutCornerBordered({
  width = 171,
  height = 1000,
  className,
  backgroundColor,
  borderColor = "var(--border)",
  cutSize = 50,
  as: Component = "div",
  onClick,
}: CutCornerBoxProps) {
  return (
    <Component
      onClick={onClick}
      // کلاس‌های ثابت را در cn و مقادیر متغیر را در style می‌گذاریم
      className={cn("vertical-bordered-box", backgroundColor, className)}
      style={
        {
          width: width,
          height: height,
          "--c": borderColor, // پاس دادن رنگ به متغیر CSS
          "--s": `${cutSize}px`, // پاس دادن اندازه برش به متغیر CSS
        } as React.CSSProperties
      }
    />
  );
}
