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

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

const ACCENT_WIDTH = '4px';

const TONE_VAR: Record<AccentTone, string> = {
  primary: 'var(--bal-primary)',
  secondary: 'var(--bal-secondary)',
  success: 'var(--bal-success)',
  error: 'var(--bal-error)',
  warning: 'var(--bal-warning)',
  info: 'var(--bal-info)',
  trust: 'var(--bal-trust)',
  neutral: 'var(--bal-text-secondary)',
};

export interface AccentCardProps extends SurfaceCardProps {
  /** Semantic tone driving the `borderInlineStart` accent stripe — never a raw color. */
  tone: AccentTone;
}

/**
 * `SurfaceCard` plus a `borderInlineStart` accent stripe at one standardized width (4px — this app
 * previously drifted between 3px and 4px across `EarningsBalanceHeader`/`PayoutHistoryRow` vs
 * `BankStatusPanel`/`DocumentUpload`). Logical property, so the stripe sits on the correct edge under
 * RTL automatically. Used for stateful panels (bank ownership, upload state, a nurse's earnings header).
 * @component AccentCard
 */
const AccentCard: FunctionComponent<AccentCardProps> = ({ tone, sx, children, ...rest }) => (
  <SurfaceCard
    sx={{ borderInlineStart: `${ACCENT_WIDTH} solid ${TONE_VAR[tone]}`, ...sx }}
    data-accent-tone={tone}
    {...rest}
  >
    {children}
  </SurfaceCard>
);

export default AccentCard;
