import { FunctionComponent } from 'react';
import Paper, { PaperProps } from '@mui/material/Paper';

export type SurfaceCardPadding = 'sm' | 'md' | 'lg';

const PADDING_SCALE: Record<SurfaceCardPadding, number> = {
  sm: 2,
  md: 2.5,
  lg: 3,
};

export interface SurfaceCardProps extends Omit<PaperProps, 'elevation' | 'variant'> {
  /** Padding scale — `sm`≈16px / `md`≈20px / `lg`≈24px (theme spacing units 2/2.5/3). Default `md`. */
  padding?: SurfaceCardPadding;
}

/**
 * The de-facto card anatomy this app already hand-rolls ~12 times, codified once: a flat `Paper`
 * (`elevation={0}`), a 1px `divider` border, the house radius, and one padding scale. Every plain card
 * (`EarningsRow`, `PatientCard`, `VariantCard`, `PriceBreakdown`, …) should compose this instead of
 * re-declaring the same `sx`. Purely a visual shell — no state, no i18n.
 * @component SurfaceCard
 */
const SurfaceCard: FunctionComponent<SurfaceCardProps> = ({ padding = 'md', sx, children, ...rest }) => (
  <Paper
    elevation={0}
    sx={{
      p: PADDING_SCALE[padding],
      border: '1px solid',
      borderColor: 'divider',
      borderRadius: 'var(--bal-radius-md)',
      ...sx,
    }}
    {...rest}
  >
    {children}
  </Paper>
);

export default SurfaceCard;
