import { GetProjectsFramework } from '@vercel/sdk/models/getprojectsop.js';
import Image from 'next/image';

export const createFrameworkIcons = (
  className: string = 'w-[100px] h-[100px]'
): Record<GetProjectsFramework, React.ReactElement> => ({
  'create-react-app': (
    <Image src='/frameworkIcons/react.svg' alt='React' className={className} width={100} height={100} />
  ),
  'docusaurus-2': (
    <Image src='/frameworkIcons/docusaurus.svg' alt='Docusaurus' className={className} width={100} height={100} />
  ),
  'ionic-angular': <Image src='/frameworkIcons/ionic.svg' alt='Ionic' className={className} width={100} height={100} />,
  'ionic-react': <Image src='/frameworkIcons/ionic.svg' alt='Ionic' className={className} width={100} height={100} />,
  'react-router': (
    <Image src='/frameworkIcons/react-router.svg' alt='React Router' className={className} width={100} height={100} />
  ),
  'sanity-v3': <Image src='/frameworkIcons/solid.svg' alt='Sanity' className={className} width={100} height={100} />,
  'solidstart-1': <Image src='/frameworkIcons/svelte.svg' alt='Solid' className={className} width={100} height={100} />,
  'sveltekit-1': <Image src='/frameworkIcons/svelte.svg' alt='Svelte' className={className} width={100} height={100} />,
  angular: <Image src='/frameworkIcons/angular.svg' alt='Angular' className={className} width={100} height={100} />,
  astro: <Image src='/frameworkIcons/astro.svg' alt='Astro' className={className} width={100} height={100} />,
  blitzjs: <Image src='/frameworkIcons/blitz.svg' alt='Blitzjs' className={className} width={100} height={100} />,
  brunch: <Image src='/frameworkIcons/brunch.svg' alt='Brunch' className={className} width={100} height={100} />,
  docusaurus: (
    <Image src='/frameworkIcons/docusaurus.svg' alt='Docusaurus' className={className} width={100} height={100} />
  ),
  dojo: <Image src='/frameworkIcons/dojo.png' alt='Dojo' className={className} width={100} height={100} />,
  eleventy: <Image src='/frameworkIcons/eleventy.svg' alt='Eleventy' className={className} width={100} height={100} />,
  ember: <Image src='/frameworkIcons/ember.svg' alt='Ember' className={className} width={100} height={100} />,
  fasthtml: <Image src='/frameworkIcons/next.svg' alt='Nextjs' className={className} width={100} height={100} />,
  gatsby: <Image src='/frameworkIcons/gatsby.svg' alt='Gatsby' className={className} width={100} height={100} />,
  gridsome: <Image src='/frameworkIcons/gridsome.svg' alt='Gridsome' className={className} width={100} height={100} />,
  hexo: <Image src='/frameworkIcons/hexo.svg' alt='Hexo' className={className} width={100} height={100} />,
  hugo: <Image src='/frameworkIcons/hugo.svg' alt='Hugo' className={className} width={100} height={100} />,
  hydrogen: <Image src='/frameworkIcons/next.svg' alt='Nextjs' className={className} width={100} height={100} />,
  jekyll: <Image src='/frameworkIcons/jekyll.svg' alt='Jekyll' className={className} width={100} height={100} />,
  middleman: (
    <Image src='/frameworkIcons/middleman.svg' alt='Middleman' className={className} width={100} height={100} />
  ),
  nextjs: <Image src='/frameworkIcons/next.svg' alt='Next' className={className} width={100} height={100} />,
  nuxtjs: <Image src='/frameworkIcons/nuxt.svg' alt='Nuxtjs' className={className} width={100} height={100} />,
  parcel: <Image src='/frameworkIcons/parcel.png' alt='Parcel' className={className} width={100} height={100} />,
  polymer: <Image src='/frameworkIcons/polymer.svg' alt='Polymer' className={className} width={100} height={100} />,
  preact: <Image src='/frameworkIcons/preact.svg' alt='Preact' className={className} width={100} height={100} />,
  redwoodjs: (
    <Image src='/frameworkIcons/redwoodjs.svg' alt='Redwoodjs' className={className} width={100} height={100} />
  ),
  remix: <Image src='/frameworkIcons/remix.svg' alt='Remix' className={className} width={100} height={100} />,
  saber: <Image src='/frameworkIcons/saber.svg' alt='Saber' className={className} width={100} height={100} />,
  sanity: <Image src='/frameworkIcons/sanity.svg' alt='Sanity' className={className} width={100} height={100} />,
  sapper: <Image src='/frameworkIcons/svelte.svg' alt='Sapper' className={className} width={100} height={100} />,
  scully: <Image src='/frameworkIcons/scully.png' alt='Scully' className={className} width={100} height={100} />,
  solidstart: <Image src='/frameworkIcons/solid.svg' alt='Solid' className={className} width={100} height={100} />,
  stencil: <Image src='/frameworkIcons/stencil.svg' alt='Stencil' className={className} width={100} height={100} />,
  storybook: (
    <Image src='/frameworkIcons/storybook.svg' alt='Storybook' className={className} width={100} height={100} />
  ),
  svelte: <Image src='/frameworkIcons/svelte.svg' alt='Svelte' className={className} width={100} height={100} />,
  sveltekit: <Image src='/frameworkIcons/svelte.svg' alt='Svelte' className={className} width={100} height={100} />,
  umijs: <Image src='/frameworkIcons/umi.svg' alt='Umijs' className={className} width={100} height={100} />,
  vite: <Image src='/frameworkIcons/vite.svg' alt='Vite' className={className} width={100} height={100} />,
  vitepress: <Image src='/frameworkIcons/vite.svg' alt='Vitepress' className={className} width={100} height={100} />,
  vue: <Image src='/frameworkIcons/vue.svg' alt='Vue' className={className} width={100} height={100} />,
  vuepress: <Image src='/frameworkIcons/vuepress.png' alt='Vuepress' className={className} width={100} height={100} />,
  zola: <Image src='/frameworkIcons/zola.svg' alt='Zola' className={className} width={100} height={100} />,
});

export const FrameworkIcons = createFrameworkIcons();

export const getUniqueFrameworkIcons = (className: string = 'w-[100px] h-[100px]') => {
  const icons = createFrameworkIcons(className);
  const seenImages = new Set<string>();
  const uniqueIcons: Record<string, React.ReactNode> = {};

  for (const [key, icon] of Object.entries(icons)) {
    const imageSrc = icon?.props?.src;

    if (imageSrc && !seenImages.has(imageSrc)) {
      seenImages.add(imageSrc);
      uniqueIcons[key] = icon;
    }
  }

  return uniqueIcons;
};
