import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Input from "./Input";

describe("Input", () => {
  it("renders an input element", () => {
    render(<Input placeholder="Enter text" />);
    expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument();
  });

  it("accepts user input", async () => {
    const user = userEvent.setup();
    render(<Input placeholder="Type here" />);

    const input = screen.getByPlaceholderText("Type here");
    await user.type(input, "hello");
    expect(input).toHaveValue("hello");
  });

  it("applies size variants", () => {
    const { rerender } = render(<Input size="sm" data-testid="input" />);
    expect(screen.getByTestId("input").className).toContain("h-8");

    rerender(<Input size="lg" data-testid="input" />);
    expect(screen.getByTestId("input").className).toContain("h-10");

    rerender(<Input size="xl" data-testid="input" />);
    expect(screen.getByTestId("input").className).toContain("h-11");
  });

  it("applies purple variant", () => {
    render(<Input variant="purple" data-testid="input" />);
    expect(screen.getByTestId("input").className).toContain("focus:ring-purple-600");
  });

  it("forwards ref", () => {
    const ref = { current: null as HTMLInputElement | null };
    render(<Input ref={ref} />);
    expect(ref.current).toBeInstanceOf(HTMLInputElement);
  });

  it("supports disabled state", () => {
    render(<Input disabled data-testid="input" />);
    expect(screen.getByTestId("input")).toBeDisabled();
  });
});
