Output Variables View

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"

export interface OutputVariable {
  name: React.ReactNode
  type?: React.ReactNode
  description?: React.ReactNode
  sample?: React.ReactNode
}

export interface OutputVariablesViewProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  variables: OutputVariable[]
  title?: React.ReactNode
  emptyText?: React.ReactNode
}

export function OutputVariablesView({
  variables,
  title = "Output variables",
  emptyText = "No output variables.",
  className,
  ...props
}: OutputVariablesViewProps) {
  return (
    <div
      className={cn(
        "border-border bg-card text-card-foreground overflow-hidden rounded-lg border shadow-sm",
        className
      )}
      {...props}
    >
      <div className="border-border flex min-h-11 items-center justify-between border-b px-3">
        <p className="text-sm font-medium">{title}</p>
        <Badge variant="secondary" className="rounded-md">
          {variables.length}
        </Badge>
      </div>
      {variables.length ? (
        <div className="divide-border divide-y">
          {variables.map((variable, index) => (
            <div key={index} className="grid gap-1.5 p-3">
              <div className="flex min-w-0 items-center gap-2">
                <code className="truncate font-mono text-sm">
                  {variable.name}
                </code>
                {variable.type ? (
                  <Badge variant="outline" className="h-6 rounded-md px-2">
                    {variable.type}
                  </Badge>
                ) : null}
              </div>
              {variable.description ? (
                <p className="text-muted-foreground text-xs leading-5">
                  {variable.description}
                </p>
              ) : null}
              {variable.sample ? (
                <pre className="bg-muted text-muted-foreground mt-1 overflow-auto rounded-md p-2 text-xs">
                  {variable.sample}
                </pre>
              ) : null}
            </div>
          ))}
        </div>
      ) : (
        <div className="text-muted-foreground p-6 text-center text-sm">
          {emptyText}
        </div>
      )}
    </div>
  )
}