import Link from 'next/link';
import type { CtaBannerPayload } from '@/types/api';
import { SmartImage } from '@/components/ui';
import { FlashSaleCountdown } from '@/components/home-blocks/FlashSaleCountdown';

export function CtaBanner({ payload }: { payload: CtaBannerPayload }) {
  return (
    <section className="py-8 md:py-12">
      <div className="mx-auto max-w-7xl px-4">
        <div className="rounded-2xl overflow-hidden bg-neutral-900 text-white">
          <div className="px-8 py-10 md:px-12 md:py-14 grid md:grid-cols-2 gap-8 items-center">
            <div>
              <h2 className="font-heading text-3xl md:text-4xl font-bold text-start leading-tight">
                {payload.headline}
              </h2>
              {payload.ends_at ? (
                <FlashSaleCountdown
                  endsAt={payload.ends_at}
                  size="md"
                  className="mt-4 text-white"
                />
              ) : null}
              <Link
                href={payload.cta_url}
                className="mt-6 inline-flex rounded-md bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 text-sm font-medium shadow-sm transition"
              >
                {payload.cta_label}
              </Link>
            </div>
            <SmartImage
              src={payload.image_url}
              alt=""
              fallbackCategory="birthday"
              fallbackSeed={payload.headline}
              className="h-48 md:h-64 w-full rounded-xl"
              imgClassName="h-48 md:h-64 w-full object-cover rounded-xl"
            />
          </div>
        </div>
      </div>
    </section>
  );
}