'use client';
import { FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import AppAlert from '@/components/common/AppAlert';
import AppIcon from '@/components/common/AppIcon';

/**
 * The escrow trust callout — product-mandated copy («مبلغ به‌صورت امانی نزد بالین‌یار می‌ماند و پس از
 * پایان ویزیت آزاد می‌شود»), rendered **verbatim in fa** as an info/trust surface (teal `--bal-info`
 * tokens, a lock — never an error tone). It is *why* the family pays on-platform, so f10/f11 must reuse
 * this exact component rather than re-writing the message. Self-translating (the copy is fixed), no props.
 * @component EscrowNotice
 */
const EscrowNotice: FunctionComponent = () => {
  const t = useTranslations('payment');
  return (
    <AppAlert
      severity="info"
      variant="outlined"
      icon={<AppIcon icon="lock" size={20} color="var(--bal-primary)" />}
      data-testid="escrow-notice"
      sx={{
        marginY: 0,
        // --bal-primary, not --bal-info: the info token is an alert *background* color and is too dark
        // to read as text on the dark scheme; primary is the same deep teal in light and lifts in dark.
        borderColor: 'var(--bal-primary)',
        color: 'var(--bal-primary)',
        backgroundColor: 'var(--bal-primary-soft)',
        fontWeight: 500,
      }}
    >
      {t('escrow_notice')}
    </AppAlert>
  );
};

export default EscrowNotice;
