import * as React from "react";
import { Img, Link } from "@react-email/components";
import { emailTokens, getEmailBaseUrl, getEmailLogoUrl } from "../tokens";

export interface EmailHeaderProps {
  badge?: string;
}

export function EmailHeader({ badge }: EmailHeaderProps) {
  const homeUrl = getEmailBaseUrl();
  const logoUrl = getEmailLogoUrl();

  return (
    <table
      cellPadding={0}
      cellSpacing={0}
      border={0}
      width="100%"
      style={{
        marginBottom: "28px",
        borderBottom: `1px solid ${emailTokens.colors.border}`,
        paddingBottom: "20px",
      }}
    >
      <tbody>
        <tr>
          <td align="left" style={{ verticalAlign: "middle" }}>
            <Link
              href={homeUrl}
              style={{
                display: "inline-flex",
                alignItems: "center",
                textDecoration: "none",
              }}
            >
              <table cellPadding={0} cellSpacing={0} border={0}>
                <tbody>
                  <tr>
                    <td style={{ verticalAlign: "middle", paddingRight: "10px" }}>
                      <Img
                        src={logoUrl}
                        alt="Quto AI"
                        width="30"
                        height="30"
                        style={{
                          display: "block",
                          width: "30px",
                          height: "30px",
                          objectFit: "contain",
                        }}
                      />
                    </td>
                    <td style={{ verticalAlign: "middle" }}>
                      <span
                        style={{
                          fontFamily: emailTokens.fonts.display,
                          fontSize: "19px",
                          fontWeight: 700,
                          color: emailTokens.colors.textPrimary,
                          letterSpacing: "-0.4px",
                          lineHeight: "1",
                        }}
                      >
                        Quto AI
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </Link>
          </td>

          {badge && (
            <td align="right" style={{ verticalAlign: "middle" }}>
              <span
                style={{
                  display: "inline-block",
                  fontSize: "10px",
                  fontWeight: 700,
                  textTransform: "uppercase",
                  letterSpacing: "0.8px",
                  padding: "4px 10px",
                  borderRadius: "9999px",
                  backgroundColor: emailTokens.colors.tagBg,
                  color: emailTokens.colors.textSecondary,
                  border: `1px solid ${emailTokens.colors.border}`,
                }}
              >
                {badge}
              </span>
            </td>
          )}
        </tr>
      </tbody>
    </table>
  );
}