import React from "react";
import {
  GooglePlus,
  Pinterest,
  Facebook,
  Twitter,
  Instagram,
  Link
} from "@bufferapp/ui/Icon";
import styled from "styled-components";
import { facebook, instagram, twitter, pinterest } from '@bufferapp/ui/style/colors';

const PlaceholderIcon = styled.div`
  width: 56px;
  height: 56px;
  background: ${props => props.color};
  border-radius: 5px;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    fill: white;
  }
`;

const metrics = [
  {
    source: "Google",
    icon: <PlaceholderIcon color="#1DA463"><GooglePlus size="extraLarge" /></PlaceholderIcon>,
    metrics: [
      {
        label: "Visitors",
        value: 92127
      },
      {
        label: "Conversions",
        value: 0.85
      },
      {
        label: "Sales",
        value: 8214
      }
    ]
  },
  {
    source: "Facebook",
    icon: <PlaceholderIcon color={facebook}><Facebook size="extraLarge" /></PlaceholderIcon>,
    metrics: [
      {
        label: "Visitors",
        value: 87095
      },
      {
        label: "Conversions",
        value: 0.57
      },
      {
        label: "Sales",
        value: 7613
      }
    ]
  },
  {
    source: "Pinterest",
    icon: <PlaceholderIcon color={pinterest}><Pinterest size="extraLarge" /></PlaceholderIcon>,
    metrics: [
      {
        label: "Visitors",
        value: 76112
      },
      {
        label: "Conversions",
        value: 0.39
      },
      {
        label: "Sales",
        value: 482
      }
    ]
  },
  {
    source: "Twitter",
    icon: <PlaceholderIcon color={twitter}><Twitter size="extraLarge" /></PlaceholderIcon>,
    metrics: [
      {
        label: "Visitors",
        value: 50089
      },
      {
        label: "Conversions",
        value: 0.92
      },
      {
        label: "Sales",
        value: 8086
      }
    ]
  },
  {
    source: "Instagram",
    icon: <PlaceholderIcon color={instagram}><Instagram size="extraLarge" /></PlaceholderIcon>,
    metrics: [
      {
        label: "Visitors",
        value: 45179
      },
      {
        label: "Conversions",
        value: 0.89
      },
      {
        label: "Sales",
        value: 249
      }
    ]
  }
];

export default metrics;