import { FileText } from "lucide-react";
import { format } from "date-fns";

interface ReportCoverPageProps {
  clientName: string;
  startDate?: Date | null;
  endDate?: Date | null;
  logoUrl?: string;
}

export default function ReportCoverPage({ clientName, startDate, endDate, logoUrl }: ReportCoverPageProps) {
  return (
    <div className="w-full max-w-2xl mx-auto aspect-[8.5/11] bg-background shadow-lg border flex flex-col items-center justify-center p-12 text-center rounded-lg" style={{ fontFamily: '"Times New Roman", Times, serif' }}>
      {logoUrl ? (
        <img src={logoUrl} alt={`${clientName} Logo`} className="w-32 h-32 object-contain mb-4" />
      ) : (
        <div className="w-32 h-32 bg-muted rounded-full flex items-center justify-center mb-4">
          <FileText className="w-16 h-16 text-muted-foreground/30" />
        </div>
      )}

      <div className="space-y-2 mt-4">
        <h1 className="text-3xl font-bold text-foreground tracking-tight">
          {clientName || "Association Name"}
        </h1>
        <h2 className="text-xl font-medium text-muted-foreground uppercase tracking-wide">
          Month-End Report
        </h2>
      </div>

      <div className="space-y-1 mt-8">
        <p className="text-sm text-muted-foreground font-medium uppercase">Reporting Period</p>
        <p className="text-lg text-foreground font-semibold">
          {startDate ? format(startDate, "MMMM d, yyyy") : "Start"} —{" "}
          {endDate ? format(endDate, "MMMM d, yyyy") : "End"}
        </p>
      </div>

      <div className="mt-12 pt-12 border-t w-full">
        <p className="text-xs text-muted-foreground">
          Generated on {format(new Date(), "MMMM d, yyyy")}
        </p>
      </div>
    </div>
  );
}
