"use client";

import { cn } from "@/lib/utils";
import { RowComponent as RowComponentType } from "@/types/screen";

interface RowComponentProps {
  component: RowComponentType;
  children?: React.ReactNode;
  className?: string;
  onClick?: () => void;
  isSelected?: boolean;
  onMouseDown?: (e: React.MouseEvent) => void;
  isMoving?: boolean;
}

export default function RowComponent({
  component,
  children,
  className,
  onClick,
  isSelected,
  onMouseDown,
  isMoving,
}: RowComponentProps) {
  // 스타일 객체 생성
  const style: React.CSSProperties = {
    gridColumn: `span ${component.size.width}`,
    minHeight: `${component.size.height}px`,
    display: "flex",
    flexDirection: "row",
    ...(component.style as Partial<React.CSSProperties>),
    ...(isMoving && {
      zIndex: 50,
      opacity: 0.8,
      transform: "scale(1.02)",
    }),
  };

  return (
    <div
      className={cn(
        "flex gap-4 rounded border border-border p-2",
        isSelected && "border-primary bg-accent",
        isMoving && "cursor-move",
        className,
      )}
      style={style}
      onClick={onClick}
      onMouseDown={onMouseDown}
    >
      <div className="mr-2 text-xs text-muted-foreground">행</div>
      {children}
    </div>
  );
}
