import React from 'react';
import {ReactComponent as SVGLogotype} from 'assets/svg/logotype.svg';
import { Link } from 'react-router-dom';

type Props = {
  name?: string;
}

/**
 * Horizontal variant of logotype component
 * @param {string} name Name of service to attach to logotype
 * @return {React.ReactNode}
 */
export default function Logotype({name}: Props): JSX.Element {
  return (
    <div className="inline-flex flex-row flex-nowrap items-center">
      <div className="flex-none">
        <Link to="/">
          <SVGLogotype className="w-8 h-8 mr-2" />
        </Link>
      </div>
      <div className="flex-initial text-2xl font-bold">
        {name ?? ''} {process.env.REACT_APP_CMS_APP_NAME?.toLowerCase()}
      </div>
    </div>
  );
}