aragrp/components/playground/playground-output-card.tsx

"use client";

import { Braces } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { PlaygroundOutputPanel } from "./playground-output-panel";
import type { InteractionLog } from "./types";

interface PlaygroundOutputCardProps {
  latestLog: InteractionLog | null;
  logs: InteractionLog[];
}

export function PlaygroundOutputCard({ latestLog, logs }: PlaygroundOutputCardProps) {
  return (
    <Card className="h-full">
      <CardHeader className="pb-4">
        <div className="flex items-center gap-2">
          <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
            <Braces className="size-4" aria-hidden />
          </div>
          <div>
            <CardTitle>خروجی ساختاریافته</CardTitle>
            <CardDescription>
              پیش‌نمایش آخرین تعامل و لاگ اجرا
            </CardDescription>
          </div>
        </div>
      </CardHeader>

      <CardContent>
        <PlaygroundOutputPanel latestLog={latestLog} logs={logs} />
      </CardContent>
    </Card>
  );
}