import Link from 'next/link';
import type { LoyaltyPromoPayload } from '@/types/api';

export function LoyaltyPromo({ payload }: { payload: LoyaltyPromoPayload }) {
  return (
    <section className="py-8 md:py-12">
      <div className="mx-auto max-w-7xl px-4">
        <div className="rounded-2xl border border-accent-200 bg-accent-50 px-8 py-10 md:px-12 md:py-12 text-start">
          <h2 className="font-heading text-2xl md:text-3xl font-bold text-neutral-900">{payload.headline}</h2>
          {payload.body ? (
            <p className="mt-3 text-neutral-600 max-w-prose">{payload.body}</p>
          ) : null}
          {payload.cta_url ? (
            <Link
              href={payload.cta_url}
              className="mt-6 inline-flex rounded-md bg-primary-600 hover:bg-primary-700 text-white px-5 py-3 text-sm font-medium shadow-sm transition"
            >
              Learn more
            </Link>
          ) : null}
        </div>
      </div>
    </section>
  );
}