import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SText } from '../../common/s-components/typography/s-text';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { Media } from '../../common/components/media';
import { theme } from '../../app/theme';

type TProps = {
  label: number;
  title: string;
};

export const Legend: React.FC<TProps> = props => {
  const { label, title } = props;
  return (
    <Media alignItems="center">
      <Media.Figure>
        <SBox
          width={22}
          height={22}
          bg={theme.colors.fiord}
          borderRadius={4}
          alignItems="center"
          justifyContent="center"
          mr={8}
        >
          <SH6>{label}</SH6>
        </SBox>
      </Media.Figure>
      <SText sm color={theme.colors.periwinkleGray}>
        {title}
      </SText>
    </Media>
  );
};