import React from 'react';
import { theme } from '@veeqo/ui';

import {
  Pill, Button, Text, Hint, Bold, Glyph, Wrap, Notification,
} from '../styled';

const accentColor = theme.colors.secondary.blue.base;

export interface InfoPropTypes {
  className: string;
  pageName?: string;
  onClick: () => void;
}

const Info = ({ className, onClick, pageName }: InfoPropTypes) => (
  <Notification>
    <Pill accentColor={accentColor} className={className}>
      <Glyph name="info" color={accentColor} />
      <Wrap>
        <Text variant="body" margin="0 4px 0 0">You are currently in a</Text>
        <Bold variant="bodyBoldDark">draft view</Bold>
        <Hint variant="hintText">Apply filters and create a custom view of your products</Hint>
      </Wrap>
      <Button variant="primary" onClick={onClick} size="sm">{pageName ? `Create a custom view of your ${pageName}` : 'Create view'}</Button>
    </Pill>
  </Notification>
);

export default Info;