import React from "react";
import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { EditorMobileSection } from "./editor-mobile-section";

vi.mock("../canvas-renderer", () => ({
  CanvasRenderer: () => <div data-testid="canvas-renderer" />,
}));

describe("EditorMobileSection", () => {
  it("shows face detection helper message in face mode", () => {
    render(
      <EditorMobileSection
        isDark={false}
        canvasWidth={100}
        canvasHeight={120}
        layers={[]}
        selectedLayerId={null}
        tool="face"
        faceDetections={[{ x: 1, y: 1, width: 10, height: 10, label: "f" }]}
        faceOverlayLayerId={null}
        faceStatus="idle"
        faceBlurPreview={null}
        labels={{
          resize: "Resize",
          faceMlFailedShort: "Face failed",
          detectingFacesShort: "Detecting",
          faceDetectionTip: (count) => `Faces ${count}`,
          import: "Import",
          mood: "Mood",
          quick: "Quick",
          face: "Face",
          decor: "Decor",
        }}
        onOpenCanvasSize={() => undefined}
        onImportImage={() => undefined}
        onSelectLayer={() => undefined}
        onMoveLayer={() => undefined}
        onMoveLayerEnd={() => undefined}
        onResizeLayer={() => undefined}
        onResizeLayerEnd={() => undefined}
        onRotateLayer={() => undefined}
        onRotateLayerEnd={() => undefined}
        onInteractionStart={() => undefined}
        onInteractionEnd={() => undefined}
      />,
    );

    expect(screen.getByText("Faces 1")).toBeInTheDocument();
    expect(screen.getByText("Import")).toBeInTheDocument();
  });
});