import React from "react";
import { Button } from "./ui/button.js";

export default function ScenarioDiffDrawer({ base, patch, onClose }) {
  if (!patch) return null;
  const keys = Object.keys(patch);

  return (
    <div className="fixed inset-x-0 bottom-0 max-h-60 overflow-y-auto bg-white border-t border-gray-300 z-50 p-4 shadow-lg">
      <h4 className="font-semibold mb-3">Scenario changes</h4>

      <table className="w-full text-sm">
        <thead>
          <tr className="text-left border-b">
            <th className="py-1 pr-4">Field</th>
            <th className="py-1 pr-4">Before</th>
            <th className="py-1">After</th>
          </tr>
        </thead>
        <tbody>
          {keys.map(k => (
            <tr key={k} className="border-b last:border-0">
              <td className="py-1 pr-4">{k}</td>
              <td className="py-1 pr-4">{String(base[k] ?? "—")}</td>
              <td className="py-1">{String(patch[k])}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <Button onClick={onClose} className="mt-4">
        Close
      </Button>
    </div>
  );
}