// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * PageHeader — back link + title + intro for PluginSettingsPage.
 *
 * @layer Presentation
 */

import { ArrowLeft, Megaphone } from 'lucide-react';
import { Link } from '@tanstack/react-router';
import type { TFunction } from '../lib/constants';

interface PageHeaderProps {
  tenantId: string;
  tenantName: string;
  t: TFunction;
}

export function PageHeader({ tenantId, tenantName, t }: PageHeaderProps) {
  const title = tenantName
    ? t('tenants.pluginSettings.pageTitleWithTenant', { tenantName })
    : t('tenants.pluginSettings.pageTitle');

  return (
    <div className="flex items-start gap-4">
      <Link
        to="/dashboard/tenants/$tenantId"
        params={{ tenantId }}
        className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
        aria-label={t('tenants.pluginSettings.backToTenant')}
      >
        <ArrowLeft size={20} />
      </Link>
      <div className="flex items-center gap-3">
        <div className="p-2 rounded-lg bg-cyan-50 text-cyan-700">
          <Megaphone size={22} />
        </div>
        <div>
          <h1 className="text-xl font-bold text-gray-900">{title}</h1>
          <p className="text-sm text-gray-500">
            {t('tenants.pluginSettings.pageIntro')}
          </p>
        </div>
      </div>
    </div>
  );
}