import React from 'react';

// 定义产业类型
export type IndustryType = "粮食" | "油脂" | "种业" | "果蔬" | "畜牧" | "水产" | "鲜食" | "泛盐";

// 图标组件接口
interface IndustryIconProps {
  className?: string;
  industry: IndustryType;
  isActive?: boolean;
}

// 产业图标URL映射
const industryIconUrls: Record<IndustryType, string> = {
  "粮食": "/supply-chain/union.svg",
  "油脂": "/supply-chain/img5.svg",
  "种业": "", // 待补充
  "果蔬": "", // 待补充
  "畜牧": "", // 待补充
  "水产": "", // 待补充
  "鲜食": "", // 待补充
  "泛盐": "", // 待补充
};

// 统一的产业图标组件
const IndustryIcon: React.FC<IndustryIconProps> = ({
  className = "",
  industry,
  isActive = true
}) => {
  const iconUrl = industryIconUrls[industry];

  if (!iconUrl) {
    console.warn(`未找到产业 ${industry} 的图标URL`);
    return null;
  }

  return (
    <div className={`overflow-clip relative shrink-0 size-[50px] ${className}`}>
      <div className="absolute inset-0">
        <img
          alt={`${industry}图标`}
          className="block max-w-none size-full"
          src={iconUrl}
        />
      </div>
    </div>
  );
};

export default IndustryIcon;