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

export default function Title({subtitle, explanation, className,color}) {
  return (
      <div className={className} color={color}>
        <TitleStyle>{subtitle}</TitleStyle>
        <Explanation>{explanation}</Explanation>
      </div>
  );
}

const TitleStyle = styled.h4`
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5rem;
  margin-right: 1rem;
  color: #733c1d;
`;
const Explanation = styled.p`
  font-size: 1.4rem;
  padding: 0.5rem;
  font-weight: bold;
  color: ${(color) => color ? color : "#733c1d"};
  &::before {
    content: "";
    border-left: #f25430 5px solid;
    padding-right: 1rem;
  } 
`;