import LevelIcon from '@/components/icons/level-icon';
import { getImageUrl } from '@/utils/getImageUrl';
import { AcornIcon } from '@phosphor-icons/react';
import { ReactNode } from 'react';
import type { ReferralCard, ReferralLevel } from '../sections/referral-section';

type LeftArgs = {
  title: string;
  image?: string;
  subTitle?: string;
  description?: string;
  cards?: ReferralCard[];
};

type RightArgs = {
  title: string;
  subTitle?: string;
  description: string;
  image?: string;
  cards: ReferralCard[];
  levels: ReferralLevel[];
  quote: string;
};

export type ReferralVariantConfig = {
  sectionClass: string;
  containerClass: string;

  renderLeft: (args: LeftArgs) => ReactNode;
  renderRight: (args: RightArgs) => ReactNode;
};

const FALLBACK_IMAGE = 'https://placehold.co/495x515';

export const REFERRAL_VARIANTS: Record<
  'variant1' | 'variant2',
  ReferralVariantConfig
> = {
  variant1: {
    sectionClass: 'bg-white py-12 font-inter md:py-28',
    containerClass:
      'container flex flex-col gap-8 md:flex-row md:items-center md:gap-20',

    renderLeft: ({ title, subTitle, description, cards }) => (
      <div className="w-full px-4 md:w-[60%] md:px-8">
        {subTitle ? <h4 className="mb-2 font-semibold">{subTitle}</h4> : null}

        <h2 className="mb-3 font-syne text-3xl font-bold md:mb-6 md:text-5xl">
          {title}
        </h2>
        <p className="mb-8 text-sm md:text-base">{description}</p>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          {cards?.map((card, i) => (
            <div key={i} className="space-y-2 md:space-y-4">
              {card.icon ? (
                <img
                  src={getImageUrl(card.icon)}
                  alt={card.title}
                  className="size-8 object-contain"
                />
              ) : (
                <AcornIcon weight="fill" className="size-8" />
              )}
              <h3 className="text-xl font-bold">{card.title}</h3>
              <p className="text-sm md:text-base">{card.description}</p>
            </div>
          ))}
        </div>
      </div>
    ),

    renderRight: ({ title, image }) => (
      <div className="flex w-full justify-end px-4 md:w-[40%]">
        <img
          src={getImageUrl(image) ?? FALLBACK_IMAGE}
          className="rounded-2xl"
          alt={title}
        />
      </div>
    ),
  },

  variant2: {
    sectionClass: 'bg-white py-12 font-inter md:py-28',
    containerClass:
      'container flex flex-col gap-8 md:flex-row md:items-center md:gap-6',

    renderLeft: ({ title, image }) => (
      <div className="flex w-full justify-start p-4 md:w-[40%]">
        <img
          src={getImageUrl(image) ?? FALLBACK_IMAGE}
          className="rounded-2xl object-cover"
          alt={title}
        />
      </div>
    ),

    renderRight: ({ title, description, levels, quote }) => (
      <div className="flex w-full flex-col space-y-6 px-4 md:w-[60%] md:px-8">
        <h2 className="font-poppins text-2xl font-bold text-[#23262F] md:text-[40px]">
          {title}
        </h2>

        <p className="text-sm font-medium text-[#353945]">{description}</p>

        <div className="flex flex-col gap-5">
          {levels.map((level, i) => (
            <div key={i} className="flex items-center gap-3">
              <LevelIcon />
              <span className="font-bold text-[#353945]">{level.title}</span>
            </div>
          ))}
        </div>

        {quote ? <p className="text-[#353945] italic">{quote}</p> : null}
      </div>
    ),
  },
};