import LoaderIcon from '@/components/icons/loader-icon';
import { useCurrency } from '@/hooks/use-currency';
import { useApiSWR } from '@/hooks/useSWR';
import { TTopInvestor } from '@/types/common/Investors-type';
import { toOrdinal } from '@/utils/toOrdinal';
import { TOP_INVESTORS_VARIANTS } from '../variants/investors.variants';

export type TopInvestorsVariant = 'variant1' | 'variant2';

export type TopInvestorsProps = {
  title: string;
  subtitle?: string;
  variant?: TopInvestorsVariant;
  colors?: {
    color1?: string;
    color2?: string;
  };
};

export default function TopInvestorsSection({
  title,
  subtitle = 'A new way to book travel online, saving you time. With trip',
  variant = 'variant1',
  colors,
}: TopInvestorsProps) {
  const { data, isLoading } = useApiSWR<{ topInvestors: TTopInvestor[] }>(
    '/builder/investors/top',
  );
  const { format } = useCurrency();

  const v = TOP_INVESTORS_VARIANTS[variant];

  const investors = data?.topInvestors ?? [];
  const podium = investors.slice(0, 3);
  const topThree = investors.slice(0, 3);
  const rest = investors.slice(3);
  const restLimited = investors.slice(3, 10);

  if (isLoading)
    return (
      <div className="flex h-96 items-center justify-center gap-2 rounded-xl bg-white p-6 shadow-box">
        <LoaderIcon />
        Loading...
      </div>
    );

  if (investors.length < 3) {
    return (
      <section className={v.sectionClass}>
        <div className={v.containerClass}>
          <h2 className={v.titleClass}>{title}</h2>
          {v.showSubtitle && <p className={v.subtitleClass}>{subtitle}</p>}

          <div className="mx-auto mt-10 flex max-w-2xl items-center justify-center rounded-2xl border border-black/10 bg-white/60 p-6 text-center">
            <p className="text-sm text-black/70">
              Not enough investors available to generate top investors.
            </p>
          </div>
        </div>

        {v.background?.({ colors })}
      </section>
    );
  }

  return (
    <section className={v.sectionClass}>
      <div className={v.containerClass}>
        <h2 className={v.titleClass}>{title}</h2>

        {v.showSubtitle && <p className={v.subtitleClass}>{subtitle}</p>}

        {v.render({
          podium,
          topThree,
          rest,
          restLimited,
          format,
          toOrdinal,
        })}
      </div>

      {v.background?.({ colors })}
    </section>
  );
}