import styled from "@emotion/styled";
import React from "react";
import {
  Link as RouterLink,
  LinkProps as RouterLinkProps,
} from "react-router-dom";

const Headline = styled("h3")({
  fontSize: "1.5rem",
  lineHeight: 1,
  marginBottom: "0.2rem",
});

const Link = styled(RouterLink)({
  textDecoration: "none",
});

type NavigationHeadlineProps =
  | (Partial<Pick<RouterLinkProps, "to">> & {
      href?: undefined;
    })
  | {
      href?: string;
      to?: undefined;
    };

const NavigationHeadline: React.FC<
  React.PropsWithChildren<NavigationHeadlineProps>
> = (props) => {
  const { children, href, to } = props;

  return (
    <Headline>
      {to && <Link to={to}>{children}</Link>}
      {href && <a href={href}>{children}</a>}
      {!to && !href && children}
    </Headline>
  );
};

export default NavigationHeadline;