import React from 'react';
import { SText } from '../s-components/typography/s-text';
import { SBox } from '../s-components/layout/s-box';
import { Icon } from './icon';

type TProps = {
  title: string;
  isArrowShown?: boolean;
};

export const TitleDropdown: React.FC<TProps> = props => {
  const { title, isArrowShown } = props;
  return (
    <>
      {title}
      {isArrowShown ? <SBox width={8} height={8} /> : null}
      {isArrowShown ? (
        <SText>
          <Icon name="down-ind" size={12} color="white" />
        </SText>
      ) : null}
    </>
  );
};

TitleDropdown.defaultProps = {
  isArrowShown: true,
};