import { describe, it, expect } from "vitest";
import { renderWithProviders } from "@repo/core-testing/react";
import { screen } from "@testing-library/react";
import { FormField } from "./form-field";

describe("FormField", () => {
  it("renders label associated with input via auto-derived id", () => {
    renderWithProviders(<FormField label="Email Address" />);
    const input = screen.getByLabelText("Email Address");
    expect(input).toBeInTheDocument();
    expect(input).toHaveAttribute("id", "email-address");
  });

  it("uses an explicit id over the derived one", () => {
    renderWithProviders(<FormField label="Email" id="custom-id" />);
    expect(screen.getByLabelText("Email")).toHaveAttribute("id", "custom-id");
  });

  it("renders a description when provided", () => {
    renderWithProviders(<FormField label="Email" description="We never share it." />);
    expect(screen.getByText("We never share it.")).toBeInTheDocument();
  });

  it("renders an error message when provided", () => {
    renderWithProviders(<FormField label="Email" error="Required" />);
    expect(screen.getByText("Required")).toBeInTheDocument();
  });

  it("forwards input props (e.g., type) to the underlying input", () => {
    renderWithProviders(<FormField label="Email" type="email" />);
    expect(screen.getByLabelText("Email")).toHaveAttribute("type", "email");
  });
});
