import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
import { SectionPropertiesPanel } from "@/app/editor/panels/SectionPropertiesPanel";

// 섹션 패널의 숫자 슬라이더/프리셋 제어가 정상적으로 동작하는지 최소 한 번은 검증한다.
describe("SectionPropertiesPanel", () => {
  const baseProps: SectionBlockProps = {
    background: "default",
    paddingY: "md",
    columns: [],
    maxWidthMode: "normal",
    gapX: "md",
  };

  it("세로 패딩 프리셋/슬라이더 변경 시 updateBlock 이 paddingYPx 로 호출된다", () => {
    const updateBlock = vi.fn();
    render(
      <SectionPropertiesPanel
        sectionProps={{ ...baseProps, paddingYPx: 48 }}
        selectedBlockId="section-1"
        updateBlock={updateBlock}
      />,
    );

    const slider = screen.getByLabelText("세로 패딩 슬라이더");
    fireEvent.change(slider, { target: { value: "40" } });

    expect(updateBlock).toHaveBeenCalledWith("section-1", expect.objectContaining({ paddingYPx: 40 }));
  });
});