import React from 'react';
import { Flag } from './flag';
import { SBox } from '../s-components/layout/s-box';
import { SInfoTitle } from '../s-components/s-info-title';
import { fp as _ } from '../utils/fp';

type TProps = {
  market: {
    code: string;
    id: number;
    name: string;
  };
};

export const InfoMarket: React.FC<TProps> = props => {
  const { market } = props;
  const marketCode = _.path('code')(market);
  const marketName = _.path('short_name')(market);

  return (
    <SBox alignItems="center" px={16}>
      <SBox mb={11} testID="market-popup-icon">
        <Flag market={marketCode} width={44} height={44} marginTop={10} />
      </SBox>
      <SBox>
        <SInfoTitle testID="market-popup-text" capitalize mb={0}>
          {marketName}
        </SInfoTitle>
      </SBox>
    </SBox>
  );
};