"use client"

import {
  Reasoning,
  ReasoningContent,
  ReasoningTrigger,
} from "@/components/ui/reasoning"
import { useState } from "react"

// Simulated reasoning function (no streaming)
const getReasoning = () => {
  return `Step 1: Time to check the user's memory database for this information...

Step 2: Searching through verified sources to find relevant information...`
}

export function ReasoningBasic() {
  const [reasoningText, setReasoningText] = useState("")
  const [isStreaming] = useState(false)

  return (
    <div className="flex w-full flex-col items-start gap-4">
      <div className="flex items-baseline gap-2">
        <span className="w-5 h-5 rounded-full bg-[#1A8B7E] flex items-center justify-center shrink-0">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-check text-white"
            aria-hidden="true"
          >
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <Reasoning
          isStreaming={isStreaming}
          onOpenChange={(open) => {
            if (open) setReasoningText(getReasoning())
          }}
        >
          <ReasoningTrigger>
            <span>Thinking</span>
          </ReasoningTrigger>
          <ReasoningContent className="ml-2 mt-2 border-l-2 border-l-slate-200 px-2 pb-1 dark:border-l-slate-700">
            {reasoningText.split('\n').map((line, idx) => (
              <span key={idx}>
                {line}
                <br />
              </span>
            ))}
          </ReasoningContent>
        </Reasoning>
      </div>
    </div>
  )
}