import React from 'react';
import styled from 'styled-components';

import useStore from '../store';
import Emoji from './Emoji';

const bgs = {
  green: {
    light: 'beige',
    dark: 'darkolivegreen'
  },
  blue: {
    light: 'aliceblue',
    dark: 'steelblue',
  },
  orange: {
    light: 'linen',
    dark: 'sienna'
  },
  red: {
    light: 'lightpink',
    dark: 'mediumvioletred'
  },
  white: {
    light: 'floralwhite',
    dark: 'darkslategrey'
  },
}

const StyledAlert = styled.div`
  margin: 30px 0px;
  padding: 10px;
  border-radius: 3px;
  background-color: ${p => bgs[p.colour] && bgs[p.colour][p.theme]};
  color: ${p => p.theme === 'dark' ? 'white' : null};
  h3{
    margin-top: 0px;
  }
`;

const Alert = ({ emoji, emojiName, title, colour, children }) => {
  const theme = useStore(s => s.theme);
  return (
    <StyledAlert colour={colour} theme={theme}>
      <h3>{emoji && <Emoji e={emoji} n={emojiName} />} {title}</h3>
      {children}
    </StyledAlert>
  );
}
export default Alert;
