"use client";

import { Badge, Card } from "ikoncomponents";
import { Github, Slack, Code2 } from "lucide-react";
import Image from "next/image";

const integrations = [
  { name: "Slack", icon: Slack, color: "text-purple-400" },
  { name: "GitHub", icon: Github, color: "text-gray-400" },
  { name: "Jira", image: "/jira.svg", color: "text-blue-400" },
  { name: "API", icon: Code2, color: "text-green-400" },
];

export function IntegrationSection() {
  return (
    <section className="py-13">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center space-y-4 mb-8">
          <Badge variant="outline" className="border px-4 py-1">
            Ecosystem
          </Badge>
          <h2 className="text-4xl md:text-5xl font-bold  tracking-tight">
            Seamless Integrations
          </h2>
          <p className="text-gray-400 max-w-2xl mx-auto text-lg">
            Connect with your favorite tools through our RESTful API and
            webhooks.
          </p>
        </div>

        {/* Integration Grid */}
        <div className="flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
          {integrations.map((item) => (
            <Card
              key={item.name}
              className="w-32 h-36 flex flex-col items-center justify-center gap-4 transition-all cursor-pointer group"
            >
              <div className="p-3 rounded-xl bg-white/5 group-hover:scale-110 transition-transform">
                {item.icon ? (
                  <item.icon className={item.color} size={32} />
                ) : (
                  <Image
                    src={item.image!}
                    alt={item.name}
                    width={32}
                    height={32}
                    className={`object-contain ${item.color}`}
                  />
                )}
              </div>
              <span className="text-gray-400 text-sm font-medium">
                {item.name}
              </span>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}