import { Card, CardContent } from "@/components/ui/card";
import acmLogoFull from "@/assets/acm-logo-full.png";

/**
 * Branded on-screen "sheet" for every accounting report, mirroring the printed
 * report look: logo top-left, centered title + optional subtitle, centered
 * company name + period line, then the report table (children).
 *
 * Falls back to the management-company (ACM) logo when no association logo is set.
 */
export function ReportSheet({
  title,
  subtitle,
  companyName,
  period,
  logoUrl,
  children,
}: {
  title: string;
  subtitle?: string;
  companyName?: string;
  period?: string;
  logoUrl?: string | null;
  children: React.ReactNode;
}) {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="relative mb-5">
          <img
            src={logoUrl || (acmLogoFull as unknown as string)}
            alt=""
            className="absolute left-0 top-0 h-10 w-auto object-contain"
            onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none"; }}
          />
          <div className="text-center">
            <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
            {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
            {companyName && <p className="text-sm font-medium mt-1">{companyName}</p>}
            {period && <p className="text-xs text-muted-foreground">{period}</p>}
          </div>
        </div>
        {children}
      </CardContent>
    </Card>
  );
}
