import type { SVGProps } from "react";

type PropertyPilotLogoProps = {
  compact?: boolean;
  markClassName?: string;
  textClassName?: string;
};

function PropertyPilotMark(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 48 48"
      {...props}
    >
      <rect fill="currentColor" height="48" rx="14" width="48" />
      <path
        d="M13 28.5 24 17l11 11.5"
        stroke="white"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="3"
      />
      <path
        d="M17.5 27.5V36h13V27.5"
        stroke="white"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="3"
      />
      <path
        d="M25 12.5c5.5 1.2 9.5 5.2 10.7 10.7"
        stroke="var(--logo-accent, #d8c5a6)"
        strokeLinecap="round"
        strokeWidth="3"
      />
      <path
        d="M33 12.5h-8v8"
        stroke="var(--logo-accent, #d8c5a6)"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="3"
      />
    </svg>
  );
}

export function PropertyPilotLogo({
  compact = false,
  markClassName = "h-12 w-12 text-primary",
  textClassName = "text-2xl font-semibold tracking-tight text-foreground",
}: PropertyPilotLogoProps) {
  return (
    <div className="flex items-center gap-3">
      <PropertyPilotMark className={markClassName} />
      {compact ? null : (
        <div className="leading-none">
          <p className={textClassName}>PropertyPilot</p>
          <p className="mt-1 font-mono text-[11px] uppercase tracking-[0.24em] text-muted">
            UK property command
          </p>
        </div>
      )}
    </div>
  );
}