import { Container } from "@/components/Container";
import { SlotMedia } from "@/components/SlotMedia";
import { about } from "@/lib/data";
import type { SlotMediaItem } from "@/lib/static-images";

export function AboutDoctor({ image, aspectRatio }: { image?: SlotMediaItem; aspectRatio?: string }) {
  const src = image?.image ?? "/placeholders/doctor.svg";

  return (
    <section id="about" className="pt-10">
      <Container>
        <div className="grid items-center gap-8 overflow-hidden rounded-2xl bg-white p-5 sm:p-8 lg:grid-cols-[0.9fr_1.1fr]">
          <div className="overflow-hidden rounded-2xl bg-sky">
            <SlotMedia
              src={src}
              href={image?.href}
              fallbackSrc={image?.fallbackSrc ?? "/placeholders/doctor.svg"}
              aspectRatio={aspectRatio}
              className={!aspectRatio ? "aspect-[4/5] lg:aspect-[4/4.4]" : ""}
            />
          </div>
          <div>
            <p className="text-[13px] font-medium text-primary">{about.subtitle}</p>
            <h2 className="mt-2 text-[22px] font-bold text-navy">{about.title}</h2>
            {about.body.map((paragraph) => (
              <p key={paragraph} className="mt-4 text-[14px] leading-8 text-muted">
                {paragraph}
              </p>
            ))}
            <div className="mt-7 grid grid-cols-3 gap-3">
              {about.stats.map((stat) => (
                <div key={stat.label} className="rounded-xl bg-sky px-3 py-4 text-center">
                  <p className="font-latin text-[18px] font-bold text-navy">{stat.value}</p>
                  <p className="mt-1 text-[12px] text-muted">{stat.label}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}