import React from "react";
import { THEME } from "../../types";
import { colors } from "../../tokens";

const WIDTH = 803;
const HEIGHT = 172;
const RATIO: number = WIDTH / HEIGHT;

const widthFromHeight = (height: number) => Math.ceil(height * RATIO);

type AptibleLogoProps = {
  height: number;
  theme?: THEME;
};

export const AptibleLogo = (props: AptibleLogoProps) => {
  const { height = HEIGHT, theme = THEME.BRAND } = props;

  const textColor = {
    brand: colors.white,
    product: colors.gray["900"],
  };

  return (
    <svg
      width={widthFromHeight(height)}
      height={height}
      viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
    >
      <title>Aptible</title>

      <path
        d="M754.698 53.449c16.549 0 27.455 11.096 27.455 26.473H726.26c0-15.377 11.888-26.473 28.438-26.473zm.396 72.221c-18.103 0-28.819-13.823-28.819-30.562h76.311c0-35.429-15.757-57.827-47.872-57.827-29.992 0-48.887 20.258-48.887 52.564 0 31.148 18.895 52.564 49.838 52.564 25.522 0 40.326-14.409 45.367-33.29h-20.448c-1.744 6.041-8.561 16.551-25.49 16.551zm-86.461 13.822h20.638V.298h-20.638v139.194zm-64.555-13.874c-16.739 0-27.043-13.822-27.043-35.824 0-22.192 10.304-35.809 27.043-35.809 17.913 0 27.456 16.342 27.456 35.809s-9.543 35.824-27.456 35.824zm3.614-88.337c-15.376 0-25.108 7.211-30.372 14.806h-.38V.298h-20.449v139.194h20.449V128h.38c5.264 6.817 14.996 14.409 30.372 14.409 25.491 0 44.386-19.845 44.386-52.564 0-32.703-18.895-52.564-44.386-52.564zm-70.379-25.408c0 6.4-5.189 11.588-11.588 11.588-6.4 0-11.588-5.188-11.588-11.588 0-6.4 5.188-11.588 11.588-11.588 6.399 0 11.588 5.188 11.588 11.588zM515.5 139.544h20.449V40.059H515.5v99.485zm-36.736-99.486h18.705v16.737h-18.705v53.929c0 11.304 5.453 12.666 18.705 11.89v16.74c-4.09.965-8.592 1.552-14.045 1.552-16.327 0-25.299-7.404-25.299-28.422V56.795h-14.394V40.058h14.394V8.717h20.639v31.341zm-88.833 85.662c-16.55 0-26.853-13.823-26.853-35.825 0-22.192 10.303-35.809 26.853-35.809 17.912 0 27.455 16.342 27.455 35.809s-9.543 35.825-27.455 35.825zm3.899-88.389c-15.566 0-25.299 7.403-30.562 14.409h-.38V40.058h-20.639l-.001 132.264h20.639l.001-44.653h.38c5.263 7.403 14.996 14.79 30.562 14.79 25.3 0 44.194-19.845 44.194-52.564 0-32.703-18.894-52.564-44.194-52.564zM245.806 87.375l22.003-65.801h.38l21.812 65.801h-44.195zM255.729.348l-51.201 139.195h23.556l11.287-32.908h56.844l11.286 32.908h23.556L280.078.348h-24.349z"
        fill={textColor[theme]}
      />
      <path
        fill={colors.gold["400"]}
        d="M89.718 33.061v106.52H114.3V90.418l49.163 49.163v-32.775L89.718 33.061M114.3.285H81.524l81.939 81.939V49.449L114.3.285M-.414 106.806v32.775l49.163-49.163v49.163h24.582V33.061L-.414 106.806M-.414 49.449v32.775L81.524.285H48.442L-.414 49.449"
      />
    </svg>
  );
};