"use client"

import { Fragment, useState, type SVGProps } from "react"
import { useChat } from "@ai-sdk/react"
import { DefaultChatTransport, type ChatStatus } from "ai"
import {
  CopyIcon,
  GlobeIcon,
  MessageCircleIcon,
  RefreshCcwIcon,
} from "lucide-react"
import { toast } from "sonner"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Action, Actions } from "@/components/ai-elements/actions"
import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from "@/components/ai-elements/conversation"
import { Loader } from "@/components/ai-elements/loader"
import { Message, MessageContent } from "@/components/ai-elements/message"
import {
  PromptInput,
  PromptInputButton,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputToolbar,
  PromptInputTools,
} from "@/components/ai-elements/prompt-input"
import {
  Reasoning,
  ReasoningContent,
  ReasoningTrigger,
} from "@/components/ai-elements/reasoning"
import { Response } from "@/components/ai-elements/response"
import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from "@/components/ai-elements/sources"
import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion"

import {
  agentConfigs,
  getAgentConfig,
  type RoutingDataParts,
  type RoutingMetadata,
  type RoutingUIMessage,
} from "../lib/types"

const useCases = [
  // General Support - General questions, information requests, or non-specific support
  {
    title: "General Support - Information Request",
    content:
      "What are the best practices for data security when handling customer information? I'm building a new application and want to make sure I'm following industry standards.",
  },

  // Product Support - Questions about product features, usage, or functionality
  {
    title: "Product Support - Feature Question",
    content:
      "I love your product but I really need the ability to export my data in CSV format. This is a critical feature for my workflow and I'm considering switching to a competitor if this isn't available soon.",
  },

  // Technical Support - Technical issues, API problems, or implementation help
  {
    title: "Technical Support - API Integration",
    content:
      "I'm getting a 401 Unauthorized error when trying to authenticate with your API using OAuth 2.0. My client_id and client_secret are correct, but the token endpoint is returning an error. Can you help me debug this?",
  },

  // Refund Support - Requests for refunds, returns, or money back
  {
    title: "Refund Support - Duplicate Charge",
    content:
      "I was charged twice for my monthly subscription and I'm not happy about this. I need this resolved immediately and I want to speak to a manager about getting a refund for the duplicate charge.",
  },

  // Account Support - Login issues, password resets, account access problems
  {
    title: "Account Support - Login Issue",
    content:
      "I can't log into my account and I've tried resetting my password multiple times. I'm getting an error message that says 'Invalid credentials' but I know my password is correct. Can you help me troubleshoot this?",
  },

  // Billing Support - Billing questions, payment issues, subscription changes
  {
    title: "Billing Support - Pricing Question",
    content:
      "What's the difference between your Pro and Enterprise plans? I'm trying to understand if the additional cost is worth it for our team size and usage patterns.",
  },

  // Other - Anything that doesn't fit the above categories (chit chat, off-topic, etc.)
  {
    title: "Other - Off-topic Conversation",
    content:
      "Do you have any good restaurant recommendations in San Francisco? I'm visiting next week and want to try some local cuisine.",
  },
]

// Main Component
export function RoutingDemo() {
  const [input, setInput] = useState("")
  const [webSearch, setWebSearch] = useState(false)

  const { messages, sendMessage, status, regenerate, error } =
    useChat<RoutingUIMessage>({
      transport: new DefaultChatTransport({
        // !! CHANGE /registry/blocks/ai-agents-routing/api/routing-agent
        // to
        // /api/routing-agent in your app
        // api: "/registry/new-york-v4/blocks/ai-agents-routing/api/routing-agent", // should be -> /api/routing-agent
        api: "/view/ai-agents-routing/api/routing-agent", // should be -> /api/routing-agent
        credentials: "include",
        headers: { "Custom-Header": "value" },
      }),
      // onData: (data) => {
      //   if (data.type === "data-transient-stage-data") {
      //     setTransientStageData(
      //       data.data as RoutingDataParts["transient-stage-data"]
      //     )
      //   }
      // },

      onError: (error) => {
        toast.error(error.message)
      },
    })
  const handleSubmit = async (_message: any) => {
    if (!input.trim()) {
      return
    }

    // Use the streaming approach
    sendMessage(
      { text: input },
      {
        body: {
          webSearch,
        },
      }
    )
    setInput("") // Clear input after sending
  }

  return (
    <div className="relative mx-auto size-full h-screen max-w-3xl p-6">
      <div className="flex h-full flex-col space-y-6">
        {/* Show Empty State when no messages */}
        {messages.length === 0 && !error && status !== "streaming" && (
          <EmptyState />
        )}

        <Conversation className="relative h-full w-full flex-1">
          <ConversationContent>
            {/* Show loading state when streaming */}
            {status === "streaming" && messages.length === 0 && (
              <LoadingState />
            )}

            {/* Show error state if there's an error */}
            {error && <ErrorState error={error.message} />}

            {/* Render messages */}
            {messages.map((message) => {
              return (
                <div className="flex flex-col" key={message.id}>
                  {message.role === "assistant" &&
                    message.parts.filter((part) => part.type === "source-url")
                      .length > 0 && (
                      <Sources>
                        <SourcesTrigger
                          count={
                            message.parts.filter(
                              (part) => part.type === "source-url"
                            ).length
                          }
                        />
                        {message.parts
                          .filter((part) => part.type === "source-url")
                          .map((part, i) => (
                            <SourcesContent key={`${message.id}-${i}`}>
                              <Source
                                href={part.url}
                                key={`${message.id}-${i}`}
                                title={part.url}
                              />
                            </SourcesContent>
                          ))}
                      </Sources>
                    )}

                  {/* Render different message parts */}
                  {message.parts.map((part, index) => {
                    switch (part.type) {
                      case "text":
                        return (
                          <Fragment key={`${message.id}-${index}`}>
                            <Message from={message.role}>
                              <MessageContent>
                                <Response>{part.text}</Response>
                              </MessageContent>
                            </Message>
                            {message.role === "assistant" &&
                              index === message.parts.length - 2 && (
                                <Actions className="mb-2">
                                  <Action
                                    label="Retry"
                                    onClick={() => regenerate()}
                                  >
                                    <RefreshCcwIcon className="size-3" />
                                  </Action>
                                  <Action
                                    label="Copy"
                                    onClick={() =>
                                      navigator.clipboard.writeText(part.text)
                                    }
                                  >
                                    <CopyIcon className="size-3" />
                                  </Action>
                                </Actions>
                              )}
                          </Fragment>
                        )
                      case "reasoning":
                        return (
                          <Reasoning
                            className="mt-4 w-full"
                            isStreaming={
                              status === "streaming" &&
                              index === message.parts.length - 1 &&
                              message.id === messages.at(-1)?.id
                            }
                            key={`${message.id}-${index}`}
                          >
                            <ReasoningTrigger />
                            <ReasoningContent>{part.text}</ReasoningContent>
                          </Reasoning>
                        )
                      case "data-agent-info":
                        // Show for every assistant message that has this data part
                        return message.role === "assistant" ? (
                          <div
                            className="mt-4 max-w-fit"
                            key={`${message.id}-${index}`}
                          >
                            <AgentInfoPart data={part.data} />
                          </div>
                        ) : null
                      case "data-agent-metadata":
                        return (
                          <div
                            className="mx-2 mb-4 max-w-fit"
                            key={`${message.id}-${index}`}
                          >
                            <ClassificationMetadataPart data={part.data} />
                          </div>
                        )

                      default:
                        return null
                    }
                  })}
                </div>
              )
            })}
            {status === "submitted" && <Loader />}
          </ConversationContent>
          <ConversationScrollButton />
        </Conversation>

        <div className="py-1 pl-1">
          <Suggestions className="max-w-full">
            {useCases.slice(0, 6).map((useCase) => (
              <Suggestion
                className="rounded-lg"
                key={useCase.title}
                onClick={() => setInput(useCase.content)}
                suggestion={useCase.title}
              />
            ))}
          </Suggestions>
        </div>
        <PromptInput onSubmit={handleSubmit}>
          <PromptInputTextarea
            className="pr-12"
            onChange={(e) => setInput(e.currentTarget.value)}
            placeholder="Say something..."
            value={input}
          />
          <PromptInputToolbar>
            <PromptInputTools>
              <PromptInputButton
                onClick={() => setWebSearch(!webSearch)}
                variant={webSearch ? "default" : "ghost"}
              >
                <GlobeIcon size={16} />
                <span>Search</span>
              </PromptInputButton>
            </PromptInputTools>
            <PromptInputSubmit disabled={!input} status={status} />
          </PromptInputToolbar>
        </PromptInput>
      </div>
    </div>
  )
}

function AgentInfoPart({ data }: { data: RoutingDataParts["agent-info"] }) {
  return (
    <div className="border-border/50 bg-muted/30 flex items-center gap-3 rounded-lg border px-3 py-2">
      <span className={cn("rounded-lg px-2 py-0.5 text-lg", `${data.color}`)}>
        {data.icon}
      </span>
      <div className="flex-1">
        <p className="text-foreground text-sm font-medium">{data.task}</p>
        <p className="text-muted-foreground text-xs">Agent activated</p>
      </div>
    </div>
  )
}

function ClassificationMetadataPart({
  data,
}: {
  data: RoutingDataParts["agent-metadata"]
}) {
  return (
    <div className="border-border/50 bg-muted/30 space-y-4 rounded-xl border p-4">
      {/* Classification Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div>
            <div className="flex items-center gap-2">
              <span className="text-foreground text-xs font-medium tracking-wider uppercase">
                Routing Agent
              </span>
              <Badge
                className="border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5 text-xs text-emerald-600 dark:text-emerald-400"
                variant="secondary"
              >
                Classification Metadata
              </Badge>
            </div>
            <div className="text-muted-foreground mt-1 flex items-center gap-3 text-xs">
              <span className="flex items-center gap-1.5">
                <div
                  className={cn(
                    "bg-muted-foreground/60 h-1.5 w-1.5 rounded-full",
                    data.classification?.complexity === "complex"
                      ? "bg-red-500"
                      : "bg-emerald-500"
                  )}
                />
                {data.classification?.complexity}
              </span>
              <span className="flex items-center gap-1.5">
                <div
                  className={cn(
                    "bg-muted-foreground/60 h-1.5 w-1.5 rounded-full",
                    (data.classification?.confidence ?? 0) > 0.9
                      ? "bg-emerald-500"
                      : (data.classification?.confidence ?? 0) > 0.7
                        ? "bg-yellow-500"
                        : "bg-red-500"
                  )}
                />
                {(data.classification?.confidence ?? 0) > 0.9
                  ? "High"
                  : (data.classification?.confidence ?? 0) > 0.7
                    ? "Medium"
                    : "Low"}{" "}
                confidence
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Agent Information */}
      {data.agent && (
        <div className="bg-muted/50 flex items-center gap-3 rounded-lg p-3">
          <span
            className={cn(
              "rounded-lg px-2 py-0.5 text-lg",
              `${data.agent.color}`
            )}
          >
            {data.agent.icon}
          </span>
          <div className="flex-1">
            <p className="text-foreground text-sm font-medium">
              {data.agent.task}
            </p>
            <p className="text-muted-foreground text-xs">
              {Math.round((data.classification?.confidence ?? 0) * 100)}%
              confidence
            </p>
          </div>
        </div>
      )}

      {/* Processing Information */}
      {data.processing && (
        <div className="border-border/30 text-muted-foreground flex items-center justify-between border-t pt-2 text-xs">
          <span className="flex items-center gap-1.5">
            <div className="h-1.5 w-1.5 rounded-full bg-purple-500" />
            {data.processing.duration}ms
          </span>
          <span className="flex items-center gap-1.5">
            <div className="h-1.5 w-1.5 rounded-full bg-orange-500" />
            {data.model?.name || "Unknown"}
          </span>
        </div>
      )}
    </div>
  )
}

// Component Types

// Header Section Component
/**
 * Empty State Component for AI Agents Routing Demo
 *
 * Displays when there are no messages in the conversation.
 * Shows the demo description, agent routes, and SDK items used.
 */
const EmptyState = () => (
  <Empty className="mx-auto mt-6 max-w-2xl">
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <div className="flex -space-x-1">
          <div className="mt-1 flex size-12 items-center justify-center rounded-full border bg-white p-1 shadow-sm">
            <AISdkIcon className="size-6" />
          </div>
          <div className="flex size-12 items-center justify-center rounded-full border bg-white p-1 shadow-sm">
            <MessageCircleIcon className="size-6" />
          </div>
          <div className="mt-1 flex size-12 items-center justify-center rounded-full border bg-white p-1 shadow-sm">
            <OpenAIIcon className="size-6" />
          </div>
        </div>
      </EmptyMedia>
      <EmptyTitle>Routing Agent Pattern</EmptyTitle>
      <EmptyDescription>
        Intelligent routing system demonstrates how AI agents can analyze and
        route requests using{" "}
        <HeaderSectionLink href="https://sdk.vercel.ai/docs/v5">
          AI SDK v5
        </HeaderSectionLink>
        . The <HeaderSectionCallout>Routing Agent</HeaderSectionCallout>{" "}
        analyzes customer support requests and automatically routes them to
        specialized agents based on request type, complexity level, and
        classification confidence.
      </EmptyDescription>
    </EmptyHeader>

    <EmptyContent>
      <div className="space-y-4">
        <SdkItemsUsed
          items={[
            {
              href: "https://ai-sdk.dev/docs/reference/ai-sdk-core/tool#tool",
              label: "tool()",
            },
            {
              href: "https://x.com/nicoalbanese10/status/1965103104732659934",
              label: "new Agent()",
            },
            {
              href: "https://ai-sdk.dev/docs/reference/ai-sdk-core/step-count-is#stepcountis",
              label: "stepCountIs()",
            },
          ]}
        />
      </div>
    </EmptyContent>
  </Empty>
)

const HeaderSection = ({
  hasResults,
  status,
}: {
  hasResults: boolean
  status: ChatStatus
}) => (
  <div className="mx-auto space-y-2">
    <HeaderSectionHeading
      patternType="Agent Pattern"
      status={status}
      subtitle="AI SDK v5"
      title="Routing Agent Pattern"
    />
  </div>
)

// Loading State Component
const LoadingState = () => (
  <div className="flex h-full flex-col items-center justify-center space-y-4">
    <div className="bg-muted/50 flex h-10 w-10 items-center justify-center rounded-xl">
      <Loader />
    </div>
    <div className="space-y-1 text-center">
      <p className="text-foreground text-sm font-medium">Analyzing request</p>
      <p className="text-muted-foreground text-xs">
        Routing to specialized agent
      </p>
    </div>
  </div>
)

// Error State Component
const ErrorState = ({ error }: { error: string }) => (
  <div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
    <div className="bg-destructive/10 flex h-10 w-10 items-center justify-center rounded-xl">
      <svg
        className="text-destructive h-5 w-5"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <title>Error Icon</title>
        <path
          d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
        />
      </svg>
    </div>
    <div className="space-y-1">
      <p className="text-destructive text-sm font-medium">Error</p>
      <p className="text-muted-foreground max-w-sm text-xs">{error}</p>
    </div>
  </div>
)

function HeaderSectionCallout({ children }: { children: React.ReactNode }) {
  return (
    <span className="border-primary/10 from-primary/5 to-muted/40 text-primary rounded-[3px] border-[1px] bg-linear-to-b px-1 py-[1px] text-xs inset-shadow-2xs inset-shadow-white/25">
      {children}
    </span>
  )
}

function HeaderSectionLink({
  href,
  children,
  isCodeExample = false,
}: {
  href: string
  children: React.ReactNode
  isCodeExample?: boolean
}) {
  return (
    <a
      className={cn(
        "group border-border/20 inline-flex items-center rounded-[3px] border px-1 py-[1px] text-xs whitespace-nowrap transition-all duration-50 ease-out hover:font-medium hover:text-blue-600",
        isCodeExample &&
          "text-foreground/80 pt-[2px] font-mono text-[10px] tracking-tighter"
      )}
      href={href}
      rel="noopener noreferrer"
      target="_blank"
    >
      {children}{" "}
      <svg
        className="ml-1 size-2 translate-x-[-2px] transform text-gray-600 opacity-50 transition-all duration-150 ease-out group-hover:translate-x-0 group-hover:scale-110 group-hover:opacity-100"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <title>Link Icon</title>
        <path
          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
        />
      </svg>
    </a>
  )
}

function HeaderSectionHeading({
  title = "",
  subtitle = "",
  status,
  patternType,
}: {
  title: string
  subtitle: string
  status: ChatStatus
  patternType: string
}) {
  return (
    <div className="flex items-center gap-3">
      <div className="bg-muted flex items-center justify-center rounded-lg p-[4px] shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] dark:shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.3),_0px_1px_1px_0px_rgba(0,_0,_0,_0.2)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.05)_inset,_0px_0px_1px_0px_rgba(255,_255,_255,_0.1)]">
        {status !== "ready" ? (
          <div className="bg-primary/10 rounded-md p-1 shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] dark:shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.3),_0px_1px_1px_0px_rgba(0,_0,_0,_0.2)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.05)_inset,_0px_0px_1px_0px_rgba(255,_255,_255,_0.1)]">
            <Loader className="text-foreground size-8" />
          </div>
        ) : (
          <div className="flex items-center gap-2">
            <OpenAIIcon className="bg-primary/10 text-foreground size-8 rounded-md p-1 shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] dark:shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.3),_0px_1px_1px_0px_rgba(0,_0,_0,_0.2)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.05)_inset,_0px_0px_1px_0px_rgba(255,_255,_255,_0.1)]" />
            <AISdkIcon className="bg-primary/10 text-foreground size-8 rounded-md p-1 shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] dark:shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.3),_0px_1px_1px_0px_rgba(0,_0,_0,_0.2)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.05)_inset,_0px_0px_1px_0px_rgba(255,_255,_255,_0.1)]" />
          </div>
        )}
      </div>
      <div>
        <h1 className="text-foreground text-2xl font-semibold tracking-tight">
          {title}
        </h1>
        <div className="flex items-center gap-2">
          <p className="text-muted-foreground font-mono text-sm">{subtitle}</p>{" "}
          <p className="bg-muted/50 text-muted-foreground rounded-full px-2 py-1 text-xs">
            {patternType}
          </p>
        </div>
      </div>
    </div>
  )
}

function SdkItemsUsed({ items }: { items: { href: string; label: string }[] }) {
  return (
    <div className="flex items-center gap-2">
      <p className="text-muted-foreground flex items-center gap-1 text-xs">
        <AISdkIcon className="size-3" />
      </p>
      {items.map((item) => (
        <HeaderSectionLink href={item.href} isCodeExample key={item.href}>
          {item.label}
        </HeaderSectionLink>
      ))}
    </div>
  )
}

const OpenAIIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    preserveAspectRatio="xMidYMid"
    viewBox="0 0 256 260"
    className="dark:fill-white"
  >
    <path d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z" />
  </svg>
)

function AISdkIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <span className="text-zinc-800 dark:text-zinc-100">
      <svg
        data-testid="geist-icon"
        height="16"
        strokeLinejoin="round"
        style={{ color: "currentcolor" }}
        viewBox="0 0 16 16"
        width="16"
        {...props}
      >
        <title>AISdk Icon</title>
        <path
          d="M2.5 0.5V0H3.5V0.5C3.5 1.60457 4.39543 2.5 5.5 2.5H6V3V3.5H5.5C4.39543 3.5 3.5 4.39543 3.5 5.5V6H3H2.5V5.5C2.5 4.39543 1.60457 3.5 0.5 3.5H0V3V2.5H0.5C1.60457 2.5 2.5 1.60457 2.5 0.5Z"
          fill="currentColor"
        />
        <path
          d="M14.5 4.5V5H13.5V4.5C13.5 3.94772 13.0523 3.5 12.5 3.5H12V3V2.5H12.5C13.0523 2.5 13.5 2.05228 13.5 1.5V1H14H14.5V1.5C14.5 2.05228 14.9477 2.5 15.5 2.5H16V3V3.5H15.5C14.9477 3.5 14.5 3.94772 14.5 4.5Z"
          fill="currentColor"
        />
        <path
          d="M8.40706 4.92939L8.5 4H9.5L9.59294 4.92939C9.82973 7.29734 11.7027 9.17027 14.0706 9.40706L15 9.5V10.5L14.0706 10.5929C11.7027 10.8297 9.82973 12.7027 9.59294 15.0706L9.5 16H8.5L8.40706 15.0706C8.17027 12.7027 6.29734 10.8297 3.92939 10.5929L3 10.5V9.5L3.92939 9.40706C6.29734 9.17027 8.17027 7.29734 8.40706 4.92939Z"
          fill="currentColor"
        />
      </svg>
    </span>
  )
}