import {
  EditBlock,
  Message,
  QuestionPrompt,
  SessionContent,
  Input,
  StreamText,
  TerminalWindow,
  ThinkingIndicator,
} from "@/components/terminal-kit"

const primaryButtonEdit = `export function PrimaryButton({ children, className, ...props }: ButtonProps) {
  return (
    <button
      type="button"
      className={cn(
        "inline-flex items-center justify-center rounded-md px-4 py-2",
        "bg-[var(--terminal-white)] text-[var(--terminal-bg)]",
        "transition-[opacity,transform] duration-150 ease-out",
        "hover:opacity-90 active:scale-[0.98]",
        className,
      )}
      {...props}
    >
      {children}
    </button>
  )
}`

export function AgentSession() {
  return (
    <TerminalWindow
      path="projects/main malayvasa/folder"
      progress={{ value: 13.27, label: "context", showValue: true }}
      showTrafficLights
      footer={<Input status="agent · always-approve" />}
    >
        <SessionContent autoScroll streaming>
          <Message>/make-interfaces-feel-better</Message>
          <ThinkingIndicator label="Thinking" />
          <StreamText mode="fade" speed={80}>
            I'll improve the primary button hover — before I edit, a quick preference check.
          </StreamText>
          <QuestionPrompt
            question="Which interaction should we prioritize?"
            options={[
              { id: "1", label: "Hover feedback", description: "Ease opacity, subtle press-in" },
              { id: "2", label: "Focus ring", description: "Keyboard-visible focus state" },
            ]}
          />
          <StreamText mode="fade" speed={80}>
            Got it — easing opacity and adding a motion-safe press scale on hover.
          </StreamText>
          <EditBlock
            file="components/ui/primary-button.tsx"
            startLine={12}
            highlightLines={[19, 20, 21, 22]}
            removed={[
              { lineNumber: 19, content: '        "hover:opacity-80",' },
            ]}
            code={primaryButtonEdit}
          />
          <StreamText mode="fade" speed={80}>
            Done — hover now eases to 90% opacity and the button presses in on click.
            Want the same pass on the secondary and ghost variants?
          </StreamText>
        </SessionContent>
    </TerminalWindow>
  )
}