import * as React from "react";

import { Button, IButtonProps } from "../Button";
import { Image, IImageProps } from "../Image";
import { Upload, IUploadProps } from "../Upload";

export interface IEmptyProps {
  title?: string;
  text?: string;
  image?: IImageProps;
  button?: IButtonProps;
  upload?: IUploadProps;
}

export const Empty = ({
  button,
  upload,
  text,
  title,
  image,
}: IEmptyProps) => (
  <div className="empty">

    {image && (
      <div className="empty__image">
        <Image {...image} />
      </div>
    )}

    {title && (
      <div className="empty__title">
        {title}
      </div>
    )}
    
    {text && (
      <div className="empty__text">
        {text}
      </div>
    )}

    {button && (
      <div className="empty__button">
        <Button {...button} />
      </div>
    )}

    {upload && (
      <div className="empty__upload">
        <Upload {...upload} />
      </div>
    )}
  </div>
);