import Image from "next/image";
import type { Dictionary } from "@/content/types";
import { FallbackArt } from "@/components/ui/FallbackArt";
import { splitEmphasis } from "@/lib/emphasize";
import type { GalleryPhoto } from "@/generated/prisma/client";

export function About({ dict, photo }: { dict: Dictionary; photo?: GalleryPhoto | null }) {
  const { before, accent, after } = splitEmphasis(dict.about.title, dict.about.titleAccent);

  return (
    <section
      id="about"
      className="mx-auto grid max-w-7xl gap-12 px-4 py-24 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8"
    >
      <div className="relative aspect-[4/5] overflow-hidden rounded-3xl">
        {photo ? (
          <Image
            src={photo.imageUrl}
            alt=""
            fill
            sizes="(min-width: 1024px) 50vw, 100vw"
            className="object-cover"
          />
        ) : (
          <FallbackArt />
        )}
      </div>
      <div className="flex flex-col gap-6">
        <span className="text-xs font-bold uppercase tracking-[0.2em] text-bronze-600">
          {dict.about.eyebrow}
        </span>
        <h2 className="text-3xl font-medium text-charcoal-950 sm:text-4xl">
          {before}
          {accent ? <span className="font-extrabold">{accent}</span> : null}
          {after}
        </h2>
        <div className="flex flex-col gap-4 text-charcoal-400">
          {dict.about.paragraphs.map((paragraph) => (
            <p key={paragraph.slice(0, 24)}>{paragraph}</p>
          ))}
        </div>
      </div>
    </section>
  );
}