import { FunctionComponent } from 'react';
import { Stack, Typography } from '@mui/material';
import PriceDisplay from '../PriceDisplay';
import type { PriceUnit } from '@/services/catalog/types';

export interface ServicePriceRowProps {
  /** The variant/service name, already localised by the caller. */
  displayName: string;
  /** IRR Rials as a digit-string (wire shape); rendered as Toman via the money util in PriceDisplay. */
  priceIrr: string;
  /** Drives the unit label — an i18n key off the code, never hardcoded. */
  priceUnit: PriceUnit;
  /** Duration/count carried for later booking-summary reuse; not shown as a total here. */
  sessionCount?: number | null;
}

/**
 * One offered-service line: the service name on the start edge, the priced rate on the end edge. The
 * money + unit label render through the shared `PriceDisplay` (which uses the f0 money util and the
 * i18n `catalog` unit labels) — never re-implemented here. Used on the C3 nurse profile now and reused
 * by the booking summary (f7+).
 * @component ServicePriceRow
 */
const ServicePriceRow: FunctionComponent<ServicePriceRowProps> = ({
  displayName,
  priceIrr,
  priceUnit,
  sessionCount,
}) => (
  <Stack
    direction="row"
    sx={{
      gap: 2,
      alignItems: 'center',
      justifyContent: 'space-between',
      py: 1.5,
      borderBottom: '1px solid',
      borderColor: 'divider',
    }}
  >
    <Typography variant="body1" sx={{ fontWeight: 500, flexGrow: 1 }}>
      {displayName}
    </Typography>
    <PriceDisplay price={priceIrr} priceUnit={priceUnit} sessionCount={sessionCount} align="start" />
  </Stack>
);

export default ServicePriceRow;
