import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { theme } from '../../app/theme';
import { Flag } from '../../common/components/flag';
import { SGradientWrapper } from '../s-components/s-gradient-wrapper';

type TProps = {
  topMarket: string;
};

export const TopMarketFlag: React.FC<TProps> = props => {
  const { topMarket } = props;
  return (
    <SBox position="absolute" right={-24} top={-34}>
      <SGradientWrapper>
        <SGradientCard
          height="100%"
          right={0}
          width={1}
          colors={theme.gradients.topChartFlag}
          locations={[0, 0.2, 1]}
          start={{ x: 0.0, y: 1 }}
          end={{ x: 0.75, y: 1.0 }}
          borderRadius={0}
          zIndex={1}
        />
      </SGradientWrapper>
      <Flag
        market={topMarket}
        width={128}
        height={128}
        variant="light"
        zIndex={1}
        size="big"
      />
    </SBox>
  );
};