import React, { ReactElement } from 'react';
import css from '../../utils/css';
import emptySVG from './assets/empty.svg';
import {
  EmptyWrapper,
  EmptyContentWrapper,
  EmptyImg,
  EmptyTextWrapper,
  EmptyExtraWrapper,
} from './StyledEmpty';

import { CommonProps } from '../common';

export interface EmptyProps extends CommonProps {
  /**
   * Extra action buttons.
   */
  extra?: ReactElement;
  /**
   *  Empty image source URL.
   */
  imageSrc?: string;
  /**
   * Size of the Empty.
   */
  size?: 'small' | 'medium';
  /**
   *  Text under image.
   */
  text: string | ReactElement;
}

const Empty = ({
  imageSrc,
  text,
  extra,
  size = 'medium',
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: EmptyProps): ReactElement => {
  return (
    <EmptyWrapper
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      <EmptyContentWrapper themeSize={size}>
        <EmptyImg
          src={imageSrc !== undefined ? imageSrc : emptySVG}
          alt="empty-img"
        />
        <EmptyTextWrapper>{text}</EmptyTextWrapper>
        {React.isValidElement(extra) === true && (
          <EmptyExtraWrapper>{extra}</EmptyExtraWrapper>
        )}
      </EmptyContentWrapper>
    </EmptyWrapper>
  );
};

export default Empty;