import Image from "next/image";

export function PageHero({
  title,
  subtitle,
  logos,
}: {
  title: string;
  subtitle: string;
  logos?: string[];
}) {
  return (
    <section className="soft-block relative overflow-hidden p-6 md:p-8">
      <div className="absolute -left-8 -top-8 h-36 w-36 rounded-full bg-white/40" />
      <div className="absolute bottom-0 right-0 h-24 w-24 rounded-full bg-white/30" />
      <div className="relative flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h1 className="page-heading">{title}</h1>
          <p className="mt-2 text-sm text-slate-600">{subtitle}</p>
        </div>
        {logos && logos.length > 0 ? (
          <div className="flex flex-wrap items-center gap-2">
            {logos.slice(0, 8).map((logo, index) => (
              <div key={`${logo}-${index}`} className="flex h-10 w-10 items-center justify-center rounded-full border border-white bg-white shadow-sm">
                <Image src={logo} alt="logo" width={24} height={24} unoptimized className="h-6 w-6 object-contain" />
              </div>
            ))}
          </div>
        ) : null}
      </div>
    </section>
  );
}