import './shared/scrollableComponent.css';


interface TaskItem {
  id: string
  platform: string
  icon: string
  title: string
  metrics?: string
  isLink?: boolean
}

interface Category {
  name: string
  count: number
  color: string
  highlight: string
  items: TaskItem[]
}

interface Column {
  title: string
  count: number
  date?: string
  categories: Category[]
}

const IntegratedStrategy = () => {
  const columns: Column[] = [
    {
      title: "Built",
      count: 104,
      categories: [
        {
          name: "Social",
          count: 4,
          color: "bg-[rgba(0,30,226,0.11)]",
          highlight: "bg-[#4C60E5]",
          items: [
            {
              id: "1",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
              isLink: true,
            },
            {
              id: "2",
              platform: "Substack",
              icon: "🟠",
              title: "Substack DR 97 DA 95",
              isLink: true,
            },
            {
              id: "3",
              platform: "PayPal",
              icon: "🅿️",
              title: "Paypal DR 97 DA 95 Traffic",
              isLink: true,
            },
            {
              id: "4",
              platform: "PayPal",
              icon: "🅿️",
              title: "Paypal DR 97 DA 95 Traffic",
              isLink: true,
            },
          ],
        },
        {
          name: "Citation",
          count: 2,
          color: "bg-[rgba(60,135,255,0.17)]",
          highlight: "bg-[#4285F4]",
          items: [
            {
              id: "5",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
              isLink: true,
            },
            {
              id: "6",
              platform: "Substack",
              icon: "🟠",
              title: "Substack DR 97 DA 95 Traffic",
              isLink: true,
            },
          ],
        },
        {
          name: "Web 2.0",
          count: 3,
          color: "bg-[rgba(31,228,84,0.16)]",
          highlight: "bg-[#34A853]",
          items: [
            {
              id: "7",
              platform: "Apple Music",
              icon: "🎵",
              title: "Apple Music DR 97 DA 95 Traffic",
              isLink: true,
            },
            {
              id: "8",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
              isLink: true,
            },
            {
              id: "9",
              platform: "Pinterest",
              icon: "⚫",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
              isLink: true,
            },
          ],
        },
        {
          name: "Multimedia",
          count: 1,
          color: "bg-[rgba(255,197,30,0.27)]",
          highlight: "bg-[#FBBC05]",
          items: [
            {
              id: "10",
              platform: "Pinterest",
              icon: "⚫",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
              isLink: true,
            },
          ],
        },
      ],
    },
    {
      title: "In Progress",
      count: 14,
      date: "23 Oct 2025",
      categories: [
        {
          name: "Social",
          count: 3,
          color: "bg-[rgba(0,30,226,0.11)]",
          highlight: "bg-[#4C60E5]",
          items: [
            {
              id: "11",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
            },
            {
              id: "12",
              platform: "Substack",
              icon: "🟠",
              title: "Substack DR 97 DA 95",
            },
            {
              id: "13",
              platform: "PayPal",
              icon: "🅿️",
              title: "Paypal DR 97 DA 95 Traffic",
            },
          ],
        },
        {
          name: "Citation",
          count: 5,
          color: "bg-[rgba(60,135,255,0.17)]",
          highlight: "bg-[#4285F4]",
          items: [
            {
              id: "14",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
            },
            {
              id: "15",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
            },
            {
              id: "16",
              platform: "Substack",
              icon: "🟠",
              title: "Substack DR 97 DA 95 Traffic",
            },
            {
              id: "17",
              platform: "PayPal",
              icon: "🅿️",
              title: "Paypal DR 97 DA 95 Traffic 3,989,220",
            },
            {
              id: "18",
              platform: "Apple Music",
              icon: "🎵",
              title: "Apple Music DR 97 DA 95 Traffic",
            },
          ],
        },
        {
          name: "Web 2.0",
          count: 5,
          color: "bg-[rgba(31,228,84,0.16)]",
          highlight: "bg-[#34A853]",
          items: [
            {
              id: "19",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
            },
            {
              id: "20",
              platform: "Questions",
              icon: "⚫",
              title: "Questions to ask your CPA Published o...",
            },
            {
              id: "21",
              platform: "PayPal",
              icon: "🅿️",
              title: "Paypal DR 97 DA 95 Traffic",
            },
          ],
        },
      ],
    },
    {
      title: "Coming up",
      count: 10,
      date: "23 Nov 2025",
      categories: [
        {
          name: "Social",
          count: 5,
          color: "bg-[rgba(0,30,226,0.11)]",
          highlight: "bg-[#4C60E5]",
          items: [
            {
              id: "22",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
            },
            {
              id: "23",
              platform: "Substack",
              icon: "🟠",
              title: "Substack DR 97 DA 95",
            },
            {
              id: "24",
              platform: "PayPal",
              icon: "🅿️",
              title: "Paypal DR 97 DA 95 Traffic",
            },
            {
              id: "25",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
            },
            {
              id: "26",
              platform: "PayPal",
              icon: "🅿️",
              title: "Paypal DR 97 DA 95 Traffic",
            },
          ],
        },
        {
          name: "Citation",
          count: 5,
          color: "bg-[rgba(60,135,255,0.17)]",
          highlight: "bg-[#4285F4]",
          items: [
            {
              id: "27",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
            },
            {
              id: "28",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
            },
            {
              id: "29",
              platform: "Substack",
              icon: "🟠",
              title: "Substack DR 97 DA 95 Traffic",
            },
            {
              id: "30",
              platform: "PayPal",
              icon: "🅿️",
              title: "Paypal DR 97 DA 95 Traffic",
            },
            {
              id: "31",
              platform: "Apple Music",
              icon: "🎵",
              title: "Apple Music DR 97 DA 95 Traffic",
            },
          ],
        },
        {
          name: "Web 2.0",
          count: 2,
          color: "bg-[rgba(31,228,84,0.16)]",
          highlight: "bg-[#34A853]",
          items: [
            {
              id: "32",
              platform: "Pinterest",
              icon: "🅿️",
              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
            },
          ],
        },
      ],
    },
  ]

  const CategorySection = ({ category }: { category: Category }) => (
    <div className="mb- bg-white pt-1">
      <div className={`${category.color} px-3 py-2 mt-2  mb-2 ml-2 mr-2 rounded-xl border-blue-500`}>
        <div className="flex items-center gap-2">
          <div className={`w-2 h-5 ${category.highlight} rounded`}></div>

          <span className="font-semibold text-lg text-[#2B2D3B]">{category.name}</span>
          <span className="text-[#2B2D3B] text-lg font-semibold bg-white py-[1px] px-[10px] rounded-full">{category.count}</span>
        </div>
      </div>
      <div className="bg-white border border-l-0 border-r-0 rounded-b-md">
        {category.items.map((item) => (
          <div key={item.id} className="px-3 py-2 border-b border-gray-100 last:border-b-0">
            <div className="flex items-center gap-2">
              <span className="text-xl mt-0.5">{item.icon}</span>
              <span
                className={`text-md font-normal text-blue-600 hover:text-blue-800  ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
              >
                {item.title}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )

  return (
    <div className="p-2 ">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {columns.map((column, index) => (
          <div key={index} className="bg-[#f6f6fa] rounded-xl">
            <div className="  p-4 rounded-t-lg border-0 rounded-b-xl"> 
              {/* shadow-[0_4px_8px_0_rgba(0,0,0,0.08)] */}
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <h2 className="text-lg font-semibold text-[#2B2D3B]">{column.title}</h2>
                  <span className="text-[#2B2D3B] bg-[#e9eaf1] px-2 py-1 rounded-full text-md  font-semibold">
                    {column.count}
                  </span>
                </div>
                {column.date && <span className="text-sm text-gray-500 font-medium">{column.date}</span>}
              </div>
            </div>
            <div className=' custom-scrollbar rounded-xl px-1' style={{ border: 0}}>
              {column.categories.map((category, categoryIndex) => (
                <CategorySection key={categoryIndex} category={category} />
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default IntegratedStrategy
