frontend/src/components/features/observability/ObservabilitySection.tsx

import React from "react";
import { Button } from "@/components/ui/button";
import { Link } from "lucide-react";
import { useModal } from "@/context/ModalContext";

export function ObservabilitySection() {
  const { openModal } = useModal();

  const handleConnectObservability = () => {
    openModal("observability-connection", "Connect to AI Observability");
  };

  return (
    <div className="space-y-2">
              <Button
          onClick={handleConnectObservability}
          className="w-full justify-start gap-2"
          size="lg"
        >
        <Link className="h-4 w-4" />
        Connect AI Observability
      </Button>
    </div>
  );
}