import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { HelpCircle, Sparkles } from "lucide-react";
import { WelcomeGuideModal } from "./WelcomeGuideModal";

export function WelcomeGuideTrigger() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <>
      <Card className="bg-gradient-to-br from-primary/5 to-primary/10 border-primary/20">
        <CardContent className="p-4">
          <div className="flex items-center gap-3 mb-3">
            <div className="p-2 rounded-lg bg-primary/10">
              <Sparkles className="h-4 w-4 text-primary" />
            </div>
            <div className="flex-1">
              <h3 className="font-semibold text-sm">New to AgentGraph?</h3>
              <p className="text-xs text-muted-foreground">
                Learn how to get started
              </p>
            </div>
          </div>
          <Button
            variant="outline"
            size="sm"
            className="w-full gap-2 h-8"
            onClick={() => setIsModalOpen(true)}
          >
            <HelpCircle className="h-3 w-3" />
            <span className="text-xs">View Guide</span>
          </Button>
        </CardContent>
      </Card>

      <WelcomeGuideModal open={isModalOpen} onOpenChange={setIsModalOpen} />
    </>
  );
}