import React from 'react';
import { AtomIcon } from 'native/atoms/Icon';
import { AtomLink } from 'native/atoms/Link';
import { AtomSubtitle } from 'native/atoms/Typography/Subtitle';
import { EmptyDataContainer, TextContainer } from './styles';
import { AtomBody } from 'native/atoms/Typography/Body';

export interface IEmptyDataProps {
  /** Name of the icon */
  iconName?: string;
  /** Title text that appears above the icon */
  titleText?: string;
  /** additional text */
  bodyText?: string;
  /** This is the link text */
  blueText?: string;
  /** This is the link url */
  linkBlueText?: string;
  /** Function to be executed when press link*/
  openLink?: Function;
}

export const MoleculeEmptyData = ({
  iconName = 'empty-beer',
  titleText = 'No data',
  bodyText = '',
  blueText = '',
  linkBlueText = '',
  openLink,
  ...props
}: IEmptyDataProps) => {
  return (
    <EmptyDataContainer {...props}>
      <AtomIcon name={iconName} size={150} color={'neutral600'} />
      <TextContainer>
        <AtomSubtitle
          text={titleText}
          weight='medium'
          color={'neutral600'}
          styles={{ margin: '10px auto' }}
          size='xsmall'
        />
        <AtomBody
          size={'large'}
          text={bodyText}
          weight='regular'
          color={'neutral600'}
          styles={{ width: '216px', margin: '0 auto', textAlign: 'center' }}
        />
      </TextContainer>
      <AtomLink
        text={blueText}
        url={linkBlueText}
        disabled={false}
        typeIcon={'noIcon'}
        color='primary'
        openLink = {openLink}
      />
    </EmptyDataContainer>
  );
};
