import React, { FC } from 'react';
import { Card } from '~/components/containers/Card';
import * as styles from './styles.scss';
import { Padder } from '~/components/containers/Padder';
import { Group } from '~/components/containers/Group';
import { InputText } from '~/components/input/InputText';
import { Button } from '~/components/input/Button';
import { Filler } from '~/components/containers/Filler';
import { Icon } from '~/components/input/Icon';

interface IProps {}

const HorizontalExample: FC<IProps> = () => (
  <div className={styles.wrap}>
    <Card seamless className={styles.card}>
      <div className={styles.editor}>
        <div className={styles.uploads}>
          <div className={styles.cell} />
          <div className={styles.cell} />
          <div className={styles.cell} />
          <div className={styles.cell} />
          <div className={styles.cell} />
          <div className={styles.cell} />
        </div>

        <Padder className={styles.features}>
          <Group horizontal>
            <div className={styles.feature_add_btn}>
              <Icon icon="plus" />
            </div>

            <div className={styles.feature}>
              <Group horizontal>
                <div>ОБЛОЖКА</div>
                <Icon icon="close" />
              </Group>
            </div>

            <Filler />

            <div className={styles.feature_cell}>
              <Icon icon="cell-single" size={24} />
            </div>
          </Group>
        </Padder>
      </div>

      <Padder className={styles.panel}>
        <Group horizontal>
          <InputText title="Название" />

          <Button title="Сохранить" iconRight="check" />
        </Group>
      </Padder>
    </Card>
  </div>
);

export { HorizontalExample };