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

interface Props {
  color: string;
  label: string;
}

function DateLegend({ color, label }: Props) {
  return (
    <Container>
      <Palette color={color} />
      <Label>{label}</Label>
    </Container>
  );
}

const Palette = styled.div<{ color: string }>`
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: ${props => props.color};
`;

const Label = styled.span`
  font-size: 12px;
  color: #ababab;
`;

const Container = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
`;

export default styled(DateLegend)``;
