import { __ } from '@wordpress/i18n';

type SourceCurrencyNoticeProps = {
  availableCodes: Set<string> | undefined;
  selectedCodes: string[];
};

export function SourceCurrencyNotice({ availableCodes, selectedCodes }: SourceCurrencyNoticeProps) {
  if (availableCodes == null) return null;

  const unavailable = selectedCodes.filter((code) => !availableCodes.has(code));
  if (unavailable.length === 0) return null;

  return (
    <div
      style={{
        background: '#fcf0e3',
        border: '1px solid #e0a261',
        borderRadius: '4px',
        padding: '8px 12px',
        fontSize: '12px',
        lineHeight: '1.5',
        marginBottom: '12px',
      }}
    >
      <strong style={{ display: 'block', marginBottom: '2px' }}>
        ⚠ {__('Unavailable currencies', 'currencyrate-today-currency-blocks')}
      </strong>
      {__('The following currencies are not provided by this data source:', 'currencyrate-today-currency-blocks')}{' '}
      <code style={{ fontSize: '11px' }}>{unavailable.join(', ')}</code>
    </div>
  );
}