import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle
} from "./card";

describe("Card", () => {
  it("renders root and semantic slots", () => {
    render(
      <Card tone="accent">
        <CardHeader>
          <CardTitle>Quarterly release</CardTitle>
          <CardDescription>Ready for internal review.</CardDescription>
        </CardHeader>
        <CardContent>Checklist complete.</CardContent>
        <CardFooter>Updated 2h ago</CardFooter>
      </Card>
    );

    expect(screen.getByText("Quarterly release").closest('[data-slot="root"]')).toHaveAttribute(
      "data-tone",
      "accent"
    );
    expect(screen.getByText("Quarterly release")).toHaveAttribute("data-slot", "label");
    expect(screen.getByText("Ready for internal review.")).toHaveAttribute(
      "data-slot",
      "description"
    );
    expect(screen.getByText("Checklist complete.")).toHaveAttribute("data-slot", "content");
    expect(screen.getByText("Updated 2h ago")).toHaveAttribute("data-slot", "footer");
  });

  it("supports interactive state hooks", () => {
    render(
      <Card data-testid="card" interactive>
        <CardContent>Hover capable</CardContent>
      </Card>
    );

    expect(screen.getByTestId("card")).toHaveAttribute("data-interactive", "");
  });
});