import React, { memo } from 'react';
import { Icon } from '../../common/components/icon';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { SRow } from '../../common/s-components/layout/s-row';

type TProps = {
  title: string;
  color: string;
};

export const Filter = memo((props: TProps) => {
  const { title, color } = props;

  return (
    <SRow alignItems="center">
      <Icon color={color} name="sort" size={12} mr={8} />
      <SH6 color={color}>{title}</SH6>
    </SRow>
  );
});