/**
 * DefaultElementRenderer Component
 *
 * Fallback renderer for unknown or custom element types.
 * Can be used as a template for 3rd party element renderers.
 */

import {Text} from "react-konva";
import type {CanvasElement} from "@/types";

interface DefaultElementRendererProps {
  element: CanvasElement;
}

// Build Konva fontStyle string
const buildFontStyle = (element: CanvasElement): string => {
  const parts: string[] = [];

  if (element.typography.fontWeight.desktop >= 700) {
    parts.push("bold");
  } else if (element.typography.fontWeight.desktop <= 300) {
    parts.push("300");
  }

  if (element.typography.fontStyle === "italic") {
    parts.push("italic");
  }

  return parts.join(" ") || "normal";
};

export function DefaultElementRenderer({element}: DefaultElementRendererProps) {
  const displayText = element.name || "Element";

  return (
    <Text
      x={0}
      y={0}
      width={element.size.width}
      height={element.size.height}
      text={displayText}
      fill={element.color}
      fontFamily={element.typography.fontFamily}
      fontSize={element.typography.fontSize.desktop}
      fontStyle={buildFontStyle(element)}
      lineHeight={element.typography.lineHeight}
      letterSpacing={element.typography.letterSpacing.desktop}
      textDecoration={
        element.typography.textDecoration === "none"
          ? ""
          : element.typography.textDecoration
      }
      align="center"
      verticalAlign="middle"
      listening={false}
    />
  );
}
