// components/landing/InfluencerBlock.tsx
// Optional influencer / campaign-representative block (ux.md 1.8). Data-driven
// and HIDDEN when there is no influencer (returns null). The campaign influencer
// is the traffic source, so featuring them converts cold followers.
//
// NOTE: the current schema has no influencer profile table (only the
// `influencerCode` / `utm*` attribution columns on `purchases`). Until a data
// source exists, the page passes `influencer={null}` and this block renders
// nothing, satisfying the "hidden if none" requirement. The prop shape is ready
// for when Teleton supplies the representative's name, handle, and line.

import * as React from "react";
import { Card } from "@/components/ui";

export interface InfluencerProfile {
  name: string;
  handle: string;
  /** One-line endorsement in their voice. */
  line: string;
  photoUrl?: string;
}

export interface InfluencerBlockProps {
  influencer: InfluencerProfile | null;
}

export function InfluencerBlock({ influencer }: InfluencerBlockProps) {
  if (!influencer) return null;

  return (
    <section
      className="bg-canvas px-5 py-section"
      aria-labelledby="representante-title"
    >
      <div className="mx-auto max-w-[760px]">
        <h2 id="representante-title" className="sr-only">
          La cara de la campaña
        </h2>
        <Card elevation="drop" className="flex flex-col items-center gap-md text-center">
          {influencer.photoUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={influencer.photoUrl}
              alt={influencer.name}
              loading="lazy"
              decoding="async"
              className="h-20 w-20 rounded-full object-cover"
            />
          ) : null}
          <p className="font-body text-body-lg text-ink-strong">
            {influencer.line}
          </p>
          <p className="font-body text-body-md text-muted">
            {influencer.name} ({influencer.handle})
          </p>
        </Card>
      </div>
    </section>
  );
}