Kuma/src/modules/settings/ui/components/branding-previews/PublicPageBrandingPreview.tsx

interface PublicPageBrandingPreviewProps {
  companyName: string;
  logoUrl: string | null;
  accentColor: string;
  accentTextColor: string;
}

/**
 * Bildet den Header-Aufbau von business-public-view.tsx nach (Logo neben dem
 * Firmennamen, Akzentfarbe am aktiven Filter-Pill und am Mailto-Link), damit
 * die Vorschau exakt zeigt, wie die Werte auf der echten Buchungsseite
 * ankommen.
 */
const PublicPageBrandingPreview = ({
  companyName,
  logoUrl,
  accentColor,
  accentTextColor,
}: PublicPageBrandingPreviewProps) => {
  return (
    <div className="overflow-hidden rounded-xl border border-border bg-gray-50">
      <div className="border-b border-gray-200 bg-white/90 px-6 py-6">
        <div className="flex items-center gap-3">
          {logoUrl ? (
            <div className="relative h-10 w-10 shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-white">
              {/* eslint-disable-next-line @next/next/no-img-element -- Vorschau, kein Next-Image-Optimizer nötig für kleinen Vorschau-Kontext */}
              <img src={logoUrl} alt={companyName} className="h-full w-full object-contain p-1" />
            </div>
          ) : null}
          <h2 className="text-xl font-bold text-gray-900">{companyName || "Firmenname"}</h2>
        </div>
        <div className="mt-3 flex gap-2 text-xs text-gray-600">
          <span>Musterstraße 1, 12345 Musterstadt</span>
          <span>·</span>
          <a
            href="#"
            className="hover:underline"
            style={{ color: accentColor }}
            onClick={(e) => e.preventDefault()}
          >
            kontakt@example.com
          </a>
        </div>
      </div>

      <div className="px-6 py-5">
        <div className="flex flex-wrap gap-2">
          <span
            className="rounded-full px-4 py-1.5 text-sm font-medium"
            style={{ backgroundColor: accentColor, color: accentTextColor }}
          >
            Alle
          </span>
          <span className="rounded-full border border-gray-200 bg-white px-4 py-1.5 text-sm font-medium text-gray-600">
            Yoga
          </span>
          <span className="rounded-full border border-gray-200 bg-white px-4 py-1.5 text-sm font-medium text-gray-600">
            Pilates
          </span>
        </div>
      </div>
    </div>
  );
};

export default PublicPageBrandingPreview;