import { FunctionComponent } from 'react';
import SurfaceCard, { SurfaceCardProps } from '../SurfaceCard';

export type AccentTone = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'trust' | 'neutral';

export interface AccentCardProps extends SurfaceCardProps {
  /** Semantic tone of the panel — a state label, not a color instruction. */
  tone: AccentTone;
}

/**
 * A `SurfaceCard` for a **stateful** panel (bank ownership, upload state, a nurse's earnings header,
 * the next-visit card, the activation tracker).
 *
 * It no longer paints a colored edge stripe. The stripe was a hard vertical rule on the card's
 * inline-start edge, and under RTL a column of these read as a row of loose colored lines down the
 * right-hand side of the screen rather than a stack of cards — insetting and rounding it softened
 * the artefact without fixing the underlying problem, which was that the device drew the eye to a
 * decoration instead of to the card's own content. State is carried by the things inside the card
 * that actually say it: a `StatusChip`, a tinted icon, the copy.
 *
 * `tone` is kept because it is the semantic label callers already pass and it still reaches the DOM
 * as `data-accent-tone` (used by tests and available to any future treatment). Keeping the component
 * rather than collapsing every call site into `SurfaceCard` also keeps "this panel represents a
 * state" stated in the code.
 * @component AccentCard
 */
const AccentCard: FunctionComponent<AccentCardProps> = ({ tone, children, ...rest }) => (
  <SurfaceCard data-accent-tone={tone} {...rest}>
    {children}
  </SurfaceCard>
);

export default AccentCard;
