// @flow
import React from 'react';
import styled from 'styled-components';
import { Span, Text } from '..';

/**
 * v2 swatch
 */

type ColourPaletteSwatchProps = {
  name: string,
  foreground: string,
  background: string,
};

export const ColourPaletteSwatch = ({
  name,
  foreground,
  background,
}: ColourPaletteSwatchProps) => {
  const ColourPaletteSwatchBackground = styled.div`
    background-color: ${background};
    height: 120px;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 16px 16px 0;
  `;

  const ColourPaletteSwatchText = styled(Text)`
    text-align: center;
    color: ${foreground};
    padding: 12px 0;
  `;

  return (
    <ColourPaletteSwatchBackground>
      <ColourPaletteSwatchText>
        <Span bold>{name}</Span>
      </ColourPaletteSwatchText>

      <ColourPaletteSwatchText>{background}</ColourPaletteSwatchText>
    </ColourPaletteSwatchBackground>
  );
};
