const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) => {
  const progressSections = [
    {
      title: "Social",
      current: 42,
      total: 80,
      color: "bg-blue-500",
      bgColor: "bg-blue-100",
      icons: [
        { name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" },
        { name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" },
        { name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" },
        { name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" },
        { name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" },
      ],
    },
    {
      title: "Citation",
      current: 30,
      total: 80,
      color: "bg-blue-500",
      bgColor: "bg-blue-100",
      icons: [
        { name: "Service", color: "bg-blue-400", text: "◐", textColor: "text-white" },
        { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
        { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
        { name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" },
        { name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" },
      ],
    },
    {
      title: "Web 2.0",
      current: 15,
      total: 70,
      color: "bg-green-500",
      bgColor: "bg-green-100",
      icons: [
        { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
        { name: "Fox", color: "bg-red-600", text: "FOX", textColor: "text-white", fontSize: "text-xs" },
        { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
        { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" },
        { name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" },
      ],
    },
    {
      title: "Multimedia",
      current: 5,
      total: 15,
      color: "bg-yellow-500",
      bgColor: "bg-yellow-100",
      icons: [
        { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
        { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" },
        { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
        { name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" },
        { name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" },
      ],
    },
    {
      title: "Crowd",
      current: 5,
      total: 15,
      color: "bg-red-500",
      bgColor: "bg-red-100",
      icons: [
        { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
        { name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" },
        { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
        { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" },
        { name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" },
      ],
    },
  ]

  return (
    <div className="max-w-4xl mx-auto p-3 bg-white">


      {/* Status Cards */}
      <div className="grid grid-cols-3 gap-4 mb-4">
        <div className="px-2 rounded-lg p-1 border">
          <div className=" text-gray-700  ">Indexed:</div>
          <div className="text-sm font-bold text-gray-900">77%</div>
        </div>
        <div className="px-2 rounded-lg p-1 border">
          <div className="text- text-gray-700 ">Interlinked:</div>
          <div className="text-sm font-bold text-gray-900">5%</div>
        </div>
        <div className="px-2 rounded-lg p-1 border">
          <div className="text- text-gray-700  ">Publishing:</div>
          <div className="text-sm font-bold text-gray-900">Locked</div>
        </div>
      </div>

      {/* Progress Sections */}
      <div className="space-y-7">
        {progressSections.map((section, index) => {
          const progressPercentage = (section.current / section.total) * 100

          return (
            <div key={index} className="space-y-1">
              {/* Section Title and Progress */}
              <div className="flex items-center justify-between mb-1">
                <h3 className="text-sm font-semibold text-gray-900">
                  {section.title}: {section.current}<span className="text-gray-400">/{section.total}</span>
                </h3>
                <div className="flex gap-2">
                  {section.icons.map((icon, iconIndex) => (
                    <div
                      key={iconIndex}
                      className={`w-6 h-6 rounded-lg ${icon.color} ${icon.textColor} flex items-center justify-center font-bold ${icon.fontSize || "text-sm"}`}
                      title={icon.name}
                    >
                      {icon.text}
                    </div>
                  ))}
                </div>
              </div>

              {/* Progress Bar */}
              <div className={`w-full h-3 ${section.bgColor} rounded-full overflow-hidden cursor-pointer`} onClick={handleMenuClick} >
                <div
                  className={`h-full ${section.color} rounded-full transition-all duration-500 ease-out`}
                  style={{ width: `${progressPercentage}%` }}
                />
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default CampaignTracker