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

interface BreadCrumbProps {
  title?: string;
  subtitle?: string;
  subPart?: string;
}

function Breadcrumb(props: BreadCrumbProps) {
  return (
    <BreadcrumbContainer>
      <BreadcrumbList>{props.title || ''}</BreadcrumbList>
      <BreadcrumbList>{props.subtitle || ''}</BreadcrumbList>
      {props.subPart && (
        <>
          <BreadcrumbList>{props.subPart}</BreadcrumbList>
        </>
      )}
    </BreadcrumbContainer>
  );
}

const BreadcrumbContainer = styled.div`
  display: flex;
`;

const BreadcrumbList = styled.span`
  color: #edebe8;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
`;

export default Breadcrumb;
