import React, { useState } from "react";

export default function SQLPreview({ sql }) {
  const [open, setOpen] = useState(false);

  if (!sql) return null;

  return (
    <div
      style={{
        borderBottom: "1px solid var(--border)",
        background: "var(--panel)",
      }}
    >
      <button
        onClick={() => setOpen(!open)}
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          width: "100%",
          padding: "8px 20px",
          background: "none",
          border: "none",
          color: "var(--text-dim)",
          fontFamily: "inherit",
          fontSize: 11,
          cursor: "pointer",
          textAlign: "left",
        }}
      >
        <span style={{ transform: open ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.15s" }}>
          ▶
        </span>
        SQL Preview
      </button>
      {open && (
        <pre
          style={{
            padding: "8px 20px 12px",
            margin: 0,
            color: "var(--text-dim)",
            fontSize: 11,
            lineHeight: 1.6,
            overflowX: "auto",
            whiteSpace: "pre-wrap",
            wordBreak: "break-all",
          }}
        >
          {sql}
        </pre>
      )}
    </div>
  );
}
