import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const integrations = [
  { name: "GitHub", category: "Source control", installed: true },
  { name: "Slack", category: "Notifications", installed: true },
  { name: "Linear", category: "Issue tracking", installed: false },
  { name: "Datadog", category: "Observability", installed: false },
  { name: "Stripe", category: "Billing events", installed: false },
  { name: "Notion", category: "Docs sync", installed: false },
];

export default function IntegrationsGrid() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-5xl px-6 py-20 sm:py-24">
        <div className="mb-12 text-center">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Plays well with your stack
          </h2>
          <p className="mt-2 text-muted-foreground">
            One-click connections — no YAML, no service accounts to babysit.
          </p>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {integrations.map((integration) => (
            <div
              key={integration.name}
              className="flex flex-col rounded-xl border border-border/60 bg-card p-5"
            >
              <div className="flex items-start justify-between gap-3">
                <span className="flex size-10 items-center justify-center rounded-lg border border-border/60 bg-background font-mono text-sm font-bold">
                  {integration.name.slice(0, 2)}
                </span>
                {integration.installed && (
                  <Badge variant="secondary" className="border border-border/60">
                    Connected
                  </Badge>
                )}
              </div>
              <h3 className="mt-4 text-sm font-semibold">{integration.name}</h3>
              <p className="mt-0.5 text-xs text-muted-foreground">
                {integration.category}
              </p>
              <div className="mt-4 border-t border-border/60 pt-4">
                <Button
                  size="sm"
                  variant={integration.installed ? "ghost" : "outline"}
                  className="w-full"
                >
                  {integration.installed ? "Manage" : "Connect"}
                </Button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Integrations Grid
