import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SPlaceholder } from '../../common/s-components/s-placeholder';
import { SMessage } from '../s-components/s-message';
import { theme } from '../../app/theme';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { SNotificationPermissionBox } from '../s-components/s-notification-permission-box';

const imageUrl = require('../../../assets/placeholders/push-notifications-off.png');

type TProps = {};

export const ViewNotificationPermission: React.FC<TProps> = () => {
  return (
    <SNotificationPermissionBox>
      <SGradientCard
        colors={theme.gradients.marketCardDisabled}
        locations={[0, 0.43, 1]}
        borderRadius={8}
      />
      <SPlaceholder width={92} height={56} source={imageUrl} marginBottom={0} />
      <SBox ml={22} mt={13}>
        <SMessage mb={11}>
          Enable push notifications{'\n'}
          in your device settings.
        </SMessage>
      </SBox>
    </SNotificationPermissionBox>
  );
};