#!/bin/bash

# SVG文件目录
SVG_DIR="public/supply-chain"
# 输出目录
OUTPUT_DIR="src/client/home/pages/SupplyChainDashboards/components/icons"

# 需要转换的SVG文件列表
SVG_FILES=(
  # "union.svg"
  # "img5.svg"
  # "SupplyChainIcons.svg"
  # "BasePointIcon.svg"
  # "img7.svg"
  # "PopupInfoBox.svg"
  "SupplyChainNetwork.svg"
)

# 确保输出目录存在
mkdir -p "$OUTPUT_DIR"

# 转换每个SVG文件
for svg_file in "${SVG_FILES[@]}"; do
  svg_path="$SVG_DIR/$svg_file"

  # 检查SVG文件是否存在
  if [ ! -f "$svg_path" ]; then
    echo "警告: SVG文件不存在: $svg_file"
    continue
  fi

  # 生成组件名称
  component_name=$(echo "$svg_file" | sed 's/\.svg$//' | sed 's/[_-]\([a-z]\)/\U\1/g' | sed 's/^\([a-z]\)/\U\1/')

  # 转换SVG为JSX
  jsx_content=$(npx svg-to-jsx "$svg_path")

  # 生成React组件代码
  component_code="import React from 'react';

interface ${component_name}Props {
  className?: string;
  fill?: string;
  stroke?: string;
  width?: number | string;
  height?: number | string;
}

const ${component_name}: React.FC<${component_name}Props> = ({
  className = \"\",
  fill = \"currentColor\",
  stroke = \"currentColor\",
  width,
  height
}) => {
  return (
    ${jsx_content}
  );
};

export default ${component_name};"

  # 写入输出文件
  output_path="$OUTPUT_DIR/${component_name}.tsx"
  echo "$component_code" > "$output_path"

  echo "✓ 成功转换: $svg_file -> ${component_name}.tsx"
done

echo "\nSVG转JSX转换完成！"