import React from 'react';
import IndustryIcon, { IndustryType } from '../icons/IndustryIcon';

// 导航组件接口
interface NavigationProps {
  activeTab: IndustryType;
  onTabChange: (tab: IndustryType) => void;
  availableIndustries?: IndustryType[];
}

// 导航组件
const Navigation: React.FC<NavigationProps> = ({
  activeTab,
  onTabChange,
  availableIndustries = ["粮食", "油脂"] // 默认提供粮食和油脂
}) => {
  return (
    <div className="absolute h-[1078.893px] left-[40px] top-0 w-[150.879px]">
      <div className="absolute content-stretch flex flex-col gap-[40px] h-[944px] items-center justify-center left-0 right-[37.7%] top-1/2 translate-y-[-50%]">
        {availableIndustries.map((industry) => (
          <div
            key={industry}
            className={`box-border content-stretch flex flex-col gap-[20px] h-[220px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[60px] cursor-pointer transition-all ${
              activeTab === industry
                ? 'bg-[rgba(255,255,255,0.05)]'
                : 'hover:bg-[rgba(255,255,255,0.02)]'
            }`}
            onClick={() => onTabChange(industry)}
          >
            <IndustryIcon
              industry={industry}
              isActive={activeTab === industry}
            />
            <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
              <div className="flex flex-col font-bold justify-center leading-[32px] not-italic relative shrink-0 text-[26px] whitespace-nowrap">
                <p className={`mb-0 ${activeTab === industry ? 'text-white' : 'text-[rgba(255,255,255,0.5)]'}`}>
                  {industry.charAt(0)}
                </p>
                <p className="mb-0">&nbsp;</p>
                <p className={`${activeTab === industry ? 'text-white' : 'text-[rgba(255,255,255,0.5)]'}`}>
                  {industry.charAt(1)}
                </p>
              </div>
            </div>
          </div>
        ))}
      </div>

      
    </div>
  );
};

export default Navigation;