import React from 'react';
import Box from '@mui/material/Box';
import PhoneIcon from '@mui/icons-material/Phone';
import type { SxProps, Theme } from '@mui/material/styles';
import { Typography } from '../../atoms/Typography';
import { Link } from '../../atoms/Link';

// ─── Types ──────────────────────────────────────────────────────────────────

/** Props for the FA HelpBar molecule */
export interface HelpBarProps {
  /** Phone number shown in the bar. Spaces preserved in the label,
   *  stripped in the `tel:` href. Defaults to FA's support number. */
  phone?: string;
  /** MUI sx prop — merged onto the default footer chrome. */
  sx?: SxProps<Theme>;
}

// ─── Component ──────────────────────────────────────────────────────────────

/**
 * Sticky help footer used at the bottom of every wizard page. Shows a
 * phone-icon prefix + "Need help? Call us on" + the support number as a
 * tel-link. White fill, top border, sticky to the viewport bottom.
 *
 * Used by `WizardLayout` (for all variants that don't set `hideHelpBar`)
 * and by pages that bypass WizardLayout's chrome (e.g. the mobile-map-first
 * layout on `ProvidersStep`). Promoted from a WizardLayout-internal
 * component so both sources render an identical footer — preventing drift
 * if the phone number or styling ever changes.
 */
export const HelpBar = React.forwardRef<HTMLDivElement, HelpBarProps>(
  ({ phone = '1800 987 888', sx }, ref) => (
    <Box
      ref={ref}
      component="footer"
      sx={[
        {
          position: 'sticky',
          bottom: 0,
          zIndex: 10,
          bgcolor: 'background.paper',
          borderTop: '1px solid',
          borderColor: 'divider',
          py: 1.5,
          px: { xs: 2, md: 4 },
          textAlign: 'center',
        },
        ...(Array.isArray(sx) ? sx : [sx]),
      ]}
    >
      <Typography variant="body2" color="text.secondary" component="span">
        <PhoneIcon sx={{ fontSize: 16, verticalAlign: 'text-bottom', mr: 0.5 }} />
        Need help? Call us on{' '}
        <Link href={`tel:${phone.replace(/\s/g, '')}`} sx={{ fontWeight: 600 }}>
          {phone}
        </Link>
      </Typography>
    </Box>
  ),
);

HelpBar.displayName = 'HelpBar';
export default HelpBar;
