import React from 'react';
import ReactCountryFlag from 'react-country-flag';
import { getCountryCodeFromCallsign } from '../libs/callsignMapper';

export interface CountryFlagProps {
  /** The amateur radio callsign to determine country from */
  callsign: string;
  /** Size of the flag in em units (default: 1.5) */
  size?: number;
  /** Custom CSS class name */
  className?: string;
  /** Whether to show country code text alongside flag */
  showCountryCode?: boolean;
  /** Custom style object */
  style?: React.CSSProperties;
}

/**
 * CountryFlag component displays the country flag based on an amateur radio callsign
 * Uses react-country-flag for rendering the flag emoji/SVG
 */
export const CountryFlag: React.FC<CountryFlagProps> = ({
  callsign,
  size = 1.5,
  className = '',
  showCountryCode = false,
  style = {},
}) => {
  const countryCode = getCountryCodeFromCallsign(callsign);

  if (!countryCode) {
    // Return a placeholder if country cannot be determined
    return (
      <span
        className={`country-flag country-flag--unknown ${className}`}
        style={{ fontSize: `${size}em`, ...style }}
        title="Unknown country"
      >
        🏴
      </span>
    );
  }

  return (
    <span
      className={`country-flag ${className}`}
      style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25em', ...style }}
      title={countryCode}
    >
      <ReactCountryFlag
        countryCode={countryCode}
        svg
        style={{
          fontSize: `${size}em`,
          lineHeight: '1em',
        }}
        aria-label={`${countryCode} flag`}
      />
      {showCountryCode && <span style={{ fontSize: '0.75em' }}>{countryCode}</span>}
    </span>
  );
};

export default CountryFlag;
