'use client';

import type { CSSProperties, ReactNode } from 'react';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/cn';
import { getDealAmbientGlow, getNeutralGlow, isHighContrastMode } from '@/lib/deal-ambient';

type AmbientDealCardProps = {
  imageSrc?: string | null;
  className?: string;
  children: ReactNode;
};

export function AmbientDealCard({ imageSrc, className, children }: AmbientDealCardProps) {
  const [glow, setGlow] = useState(() => getNeutralGlow());

  useEffect(() => {
    let cancelled = false;
    const resolveGlow = isHighContrastMode()
      ? Promise.resolve(getNeutralGlow())
      : getDealAmbientGlow(imageSrc);
    void resolveGlow.then((resolvedGlow) => {
      if (!cancelled) setGlow(resolvedGlow);
    });
    return () => {
      cancelled = true;
    };
  }, [imageSrc]);

  return (
    <div
      data-ambient-deal-card=""
      className={cn(
        'relative isolate before:pointer-events-none before:absolute before:-inset-3 before:-z-10 before:rounded-xl before:bg-[radial-gradient(circle_at_50%_35%,var(--deal-ambient),transparent_72%)] before:opacity-100 before:blur-2xl before:transition-opacity before:duration-[var(--duration-base)]',
        className,
      )}
      style={{ ['--deal-ambient' as const]: glow } as CSSProperties}
    >
      {children}
    </div>
  );
}