import type { TextImageSplitPayload } from '@/types/api';
import { SmartImage } from '@/components/ui';

export function TextImageSplit({ payload }: { payload: TextImageSplitPayload }) {
  const imageFirst = payload.image_side === 'left';
  const img = (
    <SmartImage
      src={payload.image_url}
      alt=""
      fallbackCategory="venue"
      fallbackSeed={payload.headline}
      className="rounded-xl h-64 md:h-[420px] w-full"
      imgClassName="rounded-xl h-64 md:h-[420px] w-full object-cover"
    />
  );

  return (
    <section className="py-8 md:py-12">
      <div className="mx-auto max-w-7xl px-4 grid md:grid-cols-2 gap-8 md:gap-12 items-center">
        {imageFirst ? img : null}
        <div>
          <h2 className="font-heading text-2xl md:text-3xl font-bold text-neutral-900 text-start leading-snug">
            {payload.headline}
          </h2>
          <p className="mt-4 text-neutral-600 leading-relaxed whitespace-pre-line max-w-prose">
            {payload.body}
          </p>
        </div>
        {!imageFirst ? img : null}
      </div>
    </section>
  );
}