import React, { FC } from 'react';

import { Filler } from '~/components/containers/Filler';
import { Group } from '~/components/containers/Group';

import styles from './styles.module.scss';

interface IProps {
  title: string;
  description?: string;
  icon: string;
}

const MenuButton: FC<IProps> = ({
  title,
  icon,
  description,
}) => (
  <div
    className={styles.button}
  >
    <Group horizontal>
      <div className={styles.icon}>
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
          <path fill="none" d="M0 0h24v24H0V0z" />
          <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" />
        </svg>
      </div>

      <Filler>
        <div className={styles.title}>{title}</div>
        { description && <div className={styles.description}>{description}</div> }
      </Filler>
    </Group>
  </div>
);

export { MenuButton };