import React from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { SBox } from '../../common/s-components/layout/s-box';
import { Placeholder } from '../../common/components/placeholder';
import { theme } from '../../app/theme';
import { GENDER_HEIGHT, AGE_HEIGHT } from '../constants';
import { SRow } from '../../common/s-components/layout/s-row';
import { TVendor } from '../../common/types';

type TProps = {
  vendor: TVendor;
  vendorText: string;
  variant?: 'large';
};

export const Empty: React.FC<TProps> = props => {
  const { vendor, vendorText, variant } = props;

  return variant === 'large' ? (
    <SBox
      bg={theme.colors.fiord}
      mx={16}
      borderRadius={8}
      height={GENDER_HEIGHT}
    >
      <SBox mt={82}>
        <Placeholder
          variant={`no-${vendor}`}
          baseWidth={104}
          baseHeight={188}
          marginBottom={11}
        />
      </SBox>
      <SBox>
        <SText textAlign="center" lineHeight="20px">
          No {vendorText} streams {'\n'}available for the selected period.
        </SText>
      </SBox>
    </SBox>
  ) : (
    <SBox bg={theme.colors.fiord} mx={16} borderRadius={8} height={AGE_HEIGHT}>
      <SRow ml={16} mt={40.5}>
        <Placeholder
          variant={`no-${vendor}`}
          baseWidth={104}
          baseHeight={188}
          marginBottom={0}
        />
        <SBox ml={16} mt={-2.5}>
          <SText lineHeight="20px">
            No {vendorText}
            {'\n'}streams available{'\n'}for the selected period.
          </SText>
        </SBox>
      </SRow>
    </SBox>
  );
};