import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

export type BossInfoTableProps = {
  bossName: string;
  bossPosition: string;
  bankAccount: string;
};

export const BossInfoTable: FC<BossInfoTableProps> = props => {
  const { bossName, bossPosition, bankAccount } = props;

  const textStyle = {
    fontWeight: 600,
    fontSize: '14px',
  };

  return (
    <Stack
      sx={{ flexDirection: 'row', justifyContent: 'space-between', mt: 4 }}
    >
      <Stack sx={{ gap: 2 }}>
        <Typography sx={textStyle}>Nombre:{bossName}</Typography>
        <Typography sx={textStyle}>Puesto: {bossPosition}</Typography>
        <Typography sx={textStyle}>Firma:</Typography>
      </Stack>
      <Stack sx={{ justifyContent: 'space-between' }}>
        <Typography sx={textStyle}>
          Nro. de Cta. Nómina: {bankAccount}
        </Typography>
        <Stack
          sx={{ borderTop: '1px solid #000', alignItems: 'center', mt: '60px' }}
        >
          <Typography sx={textStyle}>Firma del solicitante</Typography>
          <Typography sx={{ fontSize: '11px' }}>
            (Llenar con letra de molde)
          </Typography>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default BossInfoTable;
