# Build the "AI-made label" pattern: `AiContentLabel`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
A compact badge marking content as generated or assisted, at the point of consumption.

Use it when: Public content, marketplaces, and anywhere provenance affects how a viewer should read it.

## What to build
A small badge on a piece of content stating how much of it AI produced and whether a person reviewed it, using a graded scale instead of a single "AI" mark. Opening it explains the specifics in a sentence or two. It renders next to titles, bylines, thumbnails or posts wherever the content is consumed.

### Props
- `degree`: "ai-generated" | "ai-drafted" | "ai-assisted" | "ai-edited", the gradient, mapped to labels such as "AI-generated", "AI-drafted, reviewed", "AI-assisted".
- `review`: { status: "reviewed" | "not-reviewed"; by?: string; at?: Date; changedShare?: number }, human oversight, e.g. "rewrote 32%".
- `detail?`: string, how the AI was used, e.g. "Drafted from 14 resolved support tickets".
- `model?`: string, optional model or tool provenance.
- `size`: "inline" | "compact", and `labels?` for the degree names.
- `learnMoreHref?`: string, a link to the policy explaining the scale.
- `onOpen?()`: callback when the detail is opened, for analytics.

### States it must render
- Collapsed: icon plus degree label, e.g. "AI-drafted, reviewed"; unreviewed AI-generated content reads "AI-generated, not reviewed".
- Open: a popover with the degree in words, how AI was used, who reviewed it and when, and what share they changed.
- Not reviewed: the open state says so plainly with a caution, e.g. "Not reviewed by a person yet. Steps may be wrong".
- Light assistance: "AI-assisted" with a lighter treatment and detail like "Written by a person; AI suggested a table".

### Interactions
- Clicking or pressing Enter opens the popover; Escape or clicking outside closes it.
- The learn-more link opens the policy explaining every degree on the scale.
- In lists, each label opens independently; opening one closes any other.

### Edge cases
- `degree` set but `review` unknown: show "review status unknown" rather than implying review.
- Compact size on thumbnails: keep the degree distinguishable (different icon or short code), not one shared "AI" glyph.
- Content that changed after review: show "Changed since review" if the parent passes it.
- No AI involvement: render nothing; do not show a "Human-made" claim unless the parent explicitly passes one.

## Must avoid
Binary "AI" labels that flatten heavy generation and light assistance into one meaningless mark.

## Engineering constraint
C2PA's ai-disclosure assertion carries model provenance and degree of human oversight — use the gradient.

## Accessibility
- The badge is a button with a full accessible name such as "AI-drafted, reviewed by a person. Show details".
- Degrees differ by text and icon, never only by colour or opacity.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.