import Stack from '@material-hu/mui/Stack';
import { type SxProps, type Theme } from '@material-hu/mui/styles';

import Link from '@material-hu/components/design-system/Link';

import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  type TermsModalContractStrategy,
  useMicroloansTermsModal,
} from '../contexts/MicroloansTermsModalContext';

export const DEFAULT_MICROLOAN_TNA_PERCENT = 150;

export type LegalNoteProps = {
  sx?: SxProps<Theme>;

  stackComponent?: 'footer' | 'div';
  termsStrategy?: TermsModalContractStrategy;
  showTermsLink?: boolean;
};

export const LegalNote = ({
  sx,
  stackComponent = 'footer',
  termsStrategy = 'requestOffer',
  showTermsLink = true,
}: LegalNoteProps) => {
  const { t } = useLokaliseTranslation('loans');
  const { openTermsModal } = useMicroloansTermsModal();

  return (
    <Stack
      component={stackComponent}
      sx={{
        gap: 0.75,
        alignItems: 'center',
        textAlign: 'center',
        maxWidth: 560,
        mx: 'auto',
        ...sx,
      }}
    >
      {showTermsLink && (
        <Link
          component="button"
          type="button"
          underline="hover"
          aria-label={String(t('legal.terms_aria'))}
          onClick={() => openTermsModal(termsStrategy)}
          variant="globalXS"
          sx={{
            fontWeight: 'fontWeightSemiBold',
          }}
        >
          {t('legal.terms_link_label')}
        </Link>
      )}
    </Stack>
  );
};

export default LegalNote;