import React from "react";
import styled from "styled-components";
import Icon, { IconType } from "@components/Icon";

interface SectionDividerWidgetProps {
  label: string;
}

const getIconByLabel = (label: string) => {
  if (label === "Finnish") {
    return <Icon name={IconType.FinlandFlag} />;
  }
  if (label === "English") {
    return <Icon name={IconType.GBFlag} />;
  }
  return null;
};

const Heading = styled.h3`
  display: flex;
  margin-top: 12px;

  & > span.icon {
    margin-top: 4px;
  }
`;

const SectionDividerWidget: React.FC<SectionDividerWidgetProps> = ({ label }) => (
  <Heading>
    {label}&nbsp;{getIconByLabel(label)}
  </Heading>
);

export default SectionDividerWidget;
