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

interface StyleProps {
  size: number;
  color: string;
}

interface Props {
  color?: string;
  size?: number;
  title: string;
}

const H1 = ({ color = '#000', size = 24, title }: Props) => {
  return (
    <H1Style color={color} size={size}>
      {title}
    </H1Style>
  );
};

export default H1;

/* styles */
const H1Style = styled.h1<StyleProps>`
  font-size: ${({ size }) => `${size}px`};
  color: ${({ color }) => color};
`;
