import { COMPANY } from "@/lib/agent-brand"
import { cn } from "@/lib/utils"

export function CompanyLogo({
  className,
  height = 20,
}: {
  className?: string
  height?: number
}) {
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={COMPANY.logoUrl}
      alt={COMPANY.name}
      height={height}
      className={cn("w-auto object-contain", className)}
      style={{ height }}
    />
  )
}

export function RecruitingCompanyBadge({ compact = false }: { compact?: boolean }) {
  return (
    <div
      className={cn(
        "inline-flex items-center gap-2 rounded-full border border-[#e8eaed] bg-white/95 shadow-sm",
        compact ? "px-2.5 py-1" : "px-3 py-1.5"
      )}
    >
      <CompanyLogo height={compact ? 14 : 16} />
      <span className={cn("font-medium text-[#5f6368]", compact ? "text-[10px]" : "text-[11px]")}>
        Recruiting for{" "}
        <span className="font-semibold text-[#202124]">{COMPANY.name}</span>
      </span>
    </div>
  )
}

export function RecruitingCompanyContinueLabel({
  providerColor,
  centered = false,
}: {
  providerColor: string
  centered?: boolean
}) {
  return (
    <span
      className={cn(
        "inline-flex flex-wrap items-center gap-x-1.5 gap-y-1",
        centered && "justify-center"
      )}
    >
      to continue to{" "}
      <span className="font-semibold" style={{ color: providerColor }}>
        {COMPANY.careersName}
      </span>
    </span>
  )
}