"use client";

import type { DividerRendererProps } from "./types";

export function DividerRenderer({ component }: DividerRendererProps) {
  const lineWidth = component.lineWidth || 1;
  const lineColor = component.lineColor || "#000000";
  const isHorizontal = component.orientation !== "vertical";

  return (
    <div className={`flex h-full w-full ${isHorizontal ? "items-center" : "justify-center"}`}>
      <div
        style={{
          width: isHorizontal ? "100%" : `${lineWidth}px`,
          height: isHorizontal ? `${lineWidth}px` : "100%",
          backgroundColor: lineColor,
          ...(component.lineStyle === "dashed" && {
            backgroundImage: `repeating-linear-gradient(
              ${isHorizontal ? "90deg" : "0deg"},
              ${lineColor} 0px,
              ${lineColor} 10px,
              transparent 10px,
              transparent 20px
            )`,
            backgroundColor: "transparent",
          }),
          ...(component.lineStyle === "dotted" && {
            backgroundImage: `repeating-linear-gradient(
              ${isHorizontal ? "90deg" : "0deg"},
              ${lineColor} 0px,
              ${lineColor} 3px,
              transparent 3px,
              transparent 10px
            )`,
            backgroundColor: "transparent",
          }),
          ...(component.lineStyle === "double" && {
            boxShadow: isHorizontal ? `0 ${lineWidth * 2}px 0 0 ${lineColor}` : `${lineWidth * 2}px 0 0 0 ${lineColor}`,
          }),
        }}
      />
    </div>
  );
}