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

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

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