import Link from 'next/link';

import { cn } from '@kit/ui/utils';

/**
 * App Logo — MYeasyCMS by Com.BISS GmbH
 * SVG text-based logo for the MYeasyCMS platform
 */
export function LogoImage({
  className,
  width = 160,
}: {
  className?: string;
  width?: number;
}) {
  return (
    <svg
      width={width}
      className={cn('w-[120px] lg:w-[160px]', className)}
      viewBox="0 0 320 48"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="MYeasyCMS"
    >
      {/* Icon — stylized grid/module squares */}
      <rect
        x="0"
        y="8"
        width="14"
        height="14"
        rx="3"
        className="fill-primary"
      />
      <rect
        x="17"
        y="8"
        width="14"
        height="14"
        rx="3"
        className="fill-primary/70"
      />
      <rect
        x="0"
        y="25"
        width="14"
        height="14"
        rx="3"
        className="fill-primary/70"
      />
      <rect
        x="17"
        y="25"
        width="14"
        height="14"
        rx="3"
        className="fill-primary/40"
      />

      {/* "MY" in bold */}
      <text
        x="42"
        y="35"
        className="fill-primary dark:fill-white"
        fontFamily="system-ui, -apple-system, 'Segoe UI', sans-serif"
        fontSize="28"
        fontWeight="700"
        letterSpacing="-0.5"
      >
        MY
      </text>

      {/* "easy" in regular weight */}
      <text
        x="88"
        y="35"
        className="fill-secondary-foreground dark:fill-white/80"
        fontFamily="system-ui, -apple-system, 'Segoe UI', sans-serif"
        fontSize="28"
        fontWeight="400"
        letterSpacing="-0.5"
      >
        easy
      </text>

      {/* "CMS" in medium weight */}
      <text
        x="160"
        y="35"
        className="fill-primary dark:fill-white"
        fontFamily="system-ui, -apple-system, 'Segoe UI', sans-serif"
        fontSize="28"
        fontWeight="600"
        letterSpacing="-0.5"
      >
        CMS
      </text>
    </svg>
  );
}

export function AppLogo({
  href,
  label,
  className,
}: {
  href?: string | null;
  className?: string;
  label?: string;
}) {
  if (href === null) {
    return <LogoImage className={className} />;
  }

  return (
    <Link
      aria-label={label ?? 'MYeasyCMS — Startseite'}
      href={href ?? '/'}
      prefetch={true}
      className="mx-auto md:mx-0"
    >
      <LogoImage className={className} />
    </Link>
  );
}