import { Heading, Img, Section } from "react-email";
import { config } from "./config.ts";

export interface HeaderProps {
  issue: number | string;
  title: string;
}

export function Header({ issue, title }: HeaderProps) {
  return (
    <Section>
      <Heading as="h2" className="text-[18px] font-semibold text-gray-900 m-0">
        <Img
          src={config.logoUrl}
          width="32"
          height="32"
          alt=""
          className="inline-block align-middle mr-1"
        />
        <span className="align-middle text-gray-900 pl-1">{config.brandName} Newsletter {issue}</span>
      </Heading>
      <Heading as="h1" className="text-[24px] pt-4 pb-2 text-gray-900">
        {title}
      </Heading>
    </Section>
  );
}