import { FC } from 'react';

import { ToWords } from 'to-words';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

export type AmountInfoTableProps = {
  amount: string;
};

export const AmountInfoTable: FC<AmountInfoTableProps> = props => {
  const { amount } = props;

  const numberInWords = new ToWords({ localeCode: 'es-MX' }).convert(
    Number(Number(amount).toFixed(2)),
  );

  const textStyle = {
    fontWeight: 500,
    fontSize: '12px',
  };

  return (
    <Stack sx={{ gap: 1.2, mt: 3 }}>
      <Stack>
        <Typography
          color="secondary"
          sx={{ fontSize: '14px', fontWeight: 500 }}
        >
          MONTO ANTICIPADO SOLICITADO: {amount} ({numberInWords.toUpperCase()})
        </Typography>
      </Stack>
      <Stack sx={{ flexDirection: 'row', gap: 1 }}>
        <Stack
          sx={{
            px: 1,
            py: 0.5,
            border: '1px solid #000',
            height: 'fit-content',
          }}
        >
          <Typography sx={{ fontSize: '14px', fontWeight: 600 }}>
            NORMAS:
          </Typography>
        </Stack>
        <Stack>
          <Typography
            color="secondary"
            sx={textStyle}
          >
            El importe total del anticipo no excederá el 25% del sueldo bruto
            mensual del empleado (siempre y cuando el monto no exceda el neto a
            recibir en la quincena). Para poder solicitar un nuevo anticipo,
            deberán haber transcurrido dos quincenas, comprobándolo con los
            respectivos recibos de sueldo.
          </Typography>
          <Stack
            sx={{ px: 4, width: 'fit-content', borderBottom: '1px solid #000' }}
          >
            <Typography
              color="secondary"
              sx={textStyle}
            >
              AUTORIZA
            </Typography>
          </Stack>
          <Typography
            color="secondary"
            sx={{ ...textStyle, fontSize: '11px' }}
          >
            (Nivel mínimo Gerente)
          </Typography>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default AmountInfoTable;
