import { render, screen } from "@testing-library/react";
import { describe, expect, test } from "vitest";
import { Prompt, PromptDescription, Prompts, PromptTitle } from "../src/prompt";

describe("Prompt", () => {
  test("renders prompt with title and description", () => {
    render(
      <Prompt>
        <PromptTitle>Test Title</PromptTitle>
        <PromptDescription>Test description content</PromptDescription>
      </Prompt>,
    );

    expect(screen.getByText("Test Title")).toBeInTheDocument();
    expect(screen.getByText("Test description content")).toBeInTheDocument();
  });

  test("renders with data-slot attribute", () => {
    render(<Prompt>Content</Prompt>);
    const prompt = document.querySelector("[data-slot='prompt']");
    expect(prompt).toBeInTheDocument();
  });

  test("renders with data-size attribute", () => {
    render(<Prompt size="lg">Content</Prompt>);
    const prompt = document.querySelector("[data-size='lg']");
    expect(prompt).toBeInTheDocument();
  });
});

describe("Prompt sizes", () => {
  test("renders xs size", () => {
    render(<Prompt size="xs">XS Prompt</Prompt>);
    const prompt = document.querySelector("[data-size='xs']");
    expect(prompt).toHaveClass("px-3", "py-2");
  });

  test("renders sm size", () => {
    render(<Prompt size="sm">SM Prompt</Prompt>);
    const prompt = document.querySelector("[data-size='sm']");
    expect(prompt).toHaveClass("px-4", "py-2.5");
  });

  test("renders default size", () => {
    render(<Prompt size="default">Default Prompt</Prompt>);
    const prompt = document.querySelector("[data-size='default']");
    expect(prompt).toHaveClass("px-4", "py-3");
  });

  test("renders md size", () => {
    render(<Prompt size="md">MD Prompt</Prompt>);
    const prompt = document.querySelector("[data-size='md']");
    expect(prompt).toHaveClass("px-5", "py-3.5");
  });

  test("renders lg size", () => {
    render(<Prompt size="lg">LG Prompt</Prompt>);
    const prompt = document.querySelector("[data-size='lg']");
    expect(prompt).toHaveClass("px-6", "py-4");
  });
});

describe("PromptTitle", () => {
  test("renders as h3 element", () => {
    render(<PromptTitle>Title Text</PromptTitle>);
    const title = screen.getByText("Title Text");
    expect(title.tagName).toBe("H3");
  });

  test("renders with font-medium and text-gray-900", () => {
    render(<PromptTitle>Styled Title</PromptTitle>);
    const title = screen.getByText("Styled Title");
    expect(title).toHaveClass("font-medium", "text-gray-900");
  });

  test("renders with size prop", () => {
    render(<PromptTitle size="lg">Large Title</PromptTitle>);
    const title = screen.getByText("Large Title");
    expect(title).toHaveClass("text-xl");
  });

  test("has data-slot attribute", () => {
    render(<PromptTitle>Slot Title</PromptTitle>);
    const title = document.querySelector("[data-slot='prompt-title']");
    expect(title).toBeInTheDocument();
  });
});

describe("PromptDescription", () => {
  test("renders as p element", () => {
    render(<PromptDescription>Description Text</PromptDescription>);
    const desc = screen.getByText("Description Text");
    expect(desc.tagName).toBe("P");
  });

  test("renders with text-gray-600", () => {
    render(<PromptDescription>Gray Description</PromptDescription>);
    const desc = screen.getByText("Gray Description");
    expect(desc).toHaveClass("text-gray-600");
  });

  test("renders with size prop", () => {
    render(<PromptDescription size="lg">Large Description</PromptDescription>);
    const desc = screen.getByText("Large Description");
    expect(desc).toHaveClass("text-base");
  });

  test("has data-slot attribute", () => {
    render(<PromptDescription>Slot Desc</PromptDescription>);
    const desc = document.querySelector("[data-slot='prompt-description']");
    expect(desc).toBeInTheDocument();
  });
});

describe("Prompts", () => {
  test("renders multiple prompts", () => {
    render(
      <Prompts>
        <Prompt>
          <PromptTitle>Prompt 1</PromptTitle>
        </Prompt>
        <Prompt>
          <PromptTitle>Prompt 2</PromptTitle>
        </Prompt>
      </Prompts>,
    );

    expect(screen.getByText("Prompt 1")).toBeInTheDocument();
    expect(screen.getByText("Prompt 2")).toBeInTheDocument();
  });

  test("has data-slot attribute", () => {
    render(<Prompts>Content</Prompts>);
    const prompts = document.querySelector("[data-slot='prompts']");
    expect(prompts).toBeInTheDocument();
  });

  test("renders with size prop", () => {
    render(<Prompts size="sm">Content</Prompts>);
    const prompts = document.querySelector("[data-slot='prompts']");
    expect(prompts).toHaveClass("gap-3");
  });
});