import React from 'react';
import { Helmet } from 'react-helmet';
import { getCDNLink } from '@lendi-ui/commons/utils';
import type { ThemeName } from '@lendi-ui/commons/utils';

interface Favicon {
  href: string;
  rel: string;
  size?: string;
  type?: string;
}

const FaviconComponent = ({ themeName }: { themeName: ThemeName }) => {
  const cdnLink = getCDNLink();

  const favicons = {
    lendi: [
      {
        rel: 'icon',
        href: `${cdnLink}/favicons/lendi/favicon.ico?v=72cdf7edd3ca6e222efcae0835c04113`,
        type: '',
      },
      {
        rel: 'icon',
        href: `${cdnLink}/favicons/lendi/favicon-32x32.png?v=72cdf7edd3ca6e222efcae0835c04113`,
        type: 'image/png',
      },
    ],
    'lendi-next': [
      {
        rel: 'icon',
        href: `${cdnLink}/favicons/lendi/favicon.ico?v=72cdf7edd3ca6e222efcae0835c04113`,
        type: '',
      },
      {
        rel: 'icon',
        href: `${cdnLink}/favicons/lendi/favicon-32x32.png?v=72cdf7edd3ca6e222efcae0835c04113`,
        type: 'image/png',
      },
    ],
    domain: [
      {
        rel: 'icon',
        href: `${cdnLink}/favicons/domain/favicon.icon`,
        type: '',
      },
      {
        rel: 'shortcut icon',
        href: `${cdnLink}/favicons/domain/favicon.icon`,
        type: '',
      },
      {
        rel: 'icon',
        sizes: '16x16',
        href: `${cdnLink}/favicons/domain/16x16.png`,
        type: 'image/png',
      },
      {
        rel: 'icon',
        sizes: '32x32',
        href: `${cdnLink}/favicons/domain/32x32.png`,
        type: 'image/png',
      },
      {
        rel: 'icon',
        sizes: '192x192',
        href: `${cdnLink}/favicons/domain/192x192.png`,
        type: 'image/png',
      },
      {
        rel: 'icon',
        sizes: '512x512',
        href: `${cdnLink}/favicons/domain/512x512.png`,
        type: 'image/png',
      },
      {
        rel: 'apple-touch-icon-precomposed',
        href: `${cdnLink}/favicons/domain/apple-touch-icon.png`,
        type: '',
      },
    ],
    aussie: [
      {
        rel: 'icon',
        href: `${cdnLink}/favicons/aussie/favicon.ico`,
        type: '',
      },
      {
        rel: 'shortcut icon',
        href: `${cdnLink}/favicons/aussie/favicon.ico`,
        type: '',
      },
    ],
  };

  return (
    <Helmet>
      {favicons[themeName]?.map((props: Favicon, index: number) => (
        <link key={index} {...props} />
      ))}
    </Helmet>
  );
};

export const Favicon = FaviconComponent;