'use client';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import {
  LinkIcon,
  PauseIcon,
  PlayIcon,
  PlusIcon,
  RemixIcon,
  ShareArrowIcon,
} from '@/icons';
// import logWebUserEvent from '@/logging/logWebUserEvent';
import { BannerCTA } from '@/types/bannerTypes';

interface BannerCTAsProps {
  primaryCTA?: BannerCTA | null;
  secondaryCTA?: BannerCTA | null;
  buttonSize?: ButtonSize;
  secondaryVariant?: ButtonVariant;
  onCTAClick: (cta: BannerCTA, isPrimary: boolean) => void;
}

// Map icon names to actual icon components
const getIconComponent = (iconName?: string | null) => {
  if (!iconName) return null;

  const iconMap: Record<string, any> = {
    add: PlusIcon,
    add_circle: PlusIcon,
    remix: RemixIcon,
    share: ShareArrowIcon,
    playlist: PlayIcon,
    queue_music: PlayIcon,
    play: PlayIcon,
    pause: PauseIcon,
    external_link: LinkIcon,
  };

  return iconMap[iconName] || null;
};

export const BannerCTAs: React.FC<BannerCTAsProps> = ({
  primaryCTA,
  secondaryCTA,
  buttonSize = ButtonSize.Mini,
  secondaryVariant = ButtonVariant.Glass,
  onCTAClick,
}) => {
  const handleButtonClick = (
    e: React.MouseEvent,
    cta: BannerCTA,
    isPrimary: boolean
  ) => {
    // Stop propagation to prevent triggering parent banner click
    e.stopPropagation();

    // Call the provided handler
    onCTAClick?.(cta, isPrimary);
  };

  // Only render buttons if CTAs exist
  if (!primaryCTA && !secondaryCTA) {
    return null;
  }

  const PrimaryIcon = primaryCTA ? getIconComponent(primaryCTA.iconName) : null;
  const SecondaryIcon = secondaryCTA
    ? getIconComponent(secondaryCTA.iconName)
    : null;

  return (
    <>
      {primaryCTA && (
        <Button
          variant={ButtonVariant.Primary}
          shape={ButtonShape.Pill}
          size={buttonSize}
          icon={PrimaryIcon}
          onClick={(e) => handleButtonClick(e, primaryCTA, true)}
          className='py-1.5'
        >
          {primaryCTA.text?.text}
        </Button>
      )}
      {secondaryCTA && (
        <Button
          variant={secondaryVariant}
          shape={ButtonShape.Pill}
          size={buttonSize}
          icon={SecondaryIcon}
          onClick={(e) => handleButtonClick(e, secondaryCTA, false)}
          className='py-1.5'
        >
          {secondaryCTA.text?.text}
        </Button>
      )}
    </>
  );
};