"use client";

import { useState } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../ui/card";
import { Button } from "../ui/button";

export function JsonCard({ obj }: { obj: any }) {
  const [shown, setShown] = useState(false);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Document</CardTitle>
        <CardDescription>Raw JSON representation</CardDescription>
      </CardHeader>
      <CardContent>
        {shown ? (
          <pre>
            <code>{JSON.stringify(obj, null, 2)}</code>
          </pre>
        ) : (
          <Button variant="secondary" onClick={() => setShown(true)}>
            Show
          </Button>
        )}
      </CardContent>
    </Card>
  );
}