import React from "react";

interface BaseProperty {
  label: string;
  value: string | number;
  unit?: string;
  formatter?: (value: string | number) => string;
}

interface PropertyPanelProps {
  id?: string;
  type?: string;
  properties?: BaseProperty[];
}

const PropertyPanel: React.FC<PropertyPanelProps> = ({
  id,
  type = "未知类型",
  properties = [],
}) => {
  if (!id) {
    return (
      <div className="absolute top-0 right-0 h-auto bg-white p-6 rounded-bl-2xl shadow-lg min-w-[320px]">
        <h3 className="text-lg font-semibold mb-4">属性面板</h3>
        <p className="text-gray-500">请选择一个要素以查看其属性。</p>
      </div>
    );
  }

  const formatValue = (property: BaseProperty) => {
    if (property.formatter) {
      return property.formatter(property.value);
    }
    if (property.unit) {
      return `${property.value} ${property.unit}`;
    }
    return property.value;
  };

  return (
    <div className="absolute top-0 right-0 h-auto bg-white p-6 rounded-bl-2xl shadow-lg min-w-[320px]">
      <h3 className="text-lg font-semibold mb-4">属性面板</h3>
      <div className="space-y-2">
        <div>
          <span className="font-medium">ID：</span>
          <span>{id}</span>
        </div>
        <div>
          <span className="font-medium">类型：</span>
          <span>{type}</span>
        </div>
        {properties.map((property, index) => (
          <div key={index}>
            <span className="font-medium">{property.label}：</span>
            <span>{formatValue(property)}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default PropertyPanel;