import { Badge } from "~/components/ui/badge";

interface SvglIcon {
  light: string;
  dark: string;
}

const STACK_META: Record<string, { label: string; icon?: SvglIcon }> = {
  drizzle: {
    label: "Drizzle ORM",
    icon: {
      light: "https://svgl.app/library/drizzle-orm_light.svg",
      dark: "https://svgl.app/library/drizzle-orm_dark.svg",
    },
  },
  postgres: {
    label: "PostgreSQL",
    icon: {
      light: "https://svgl.app/library/postgresql.svg",
      dark: "https://svgl.app/library/postgresql.svg",
    },
  },
  nextjs: {
    label: "Next.js",
    icon: {
      light: "https://svgl.app/library/nextjs_icon_dark.svg",
      dark: "https://svgl.app/library/nextjs_icon_dark.svg",
    },
  },
  react: {
    label: "React",
    icon: {
      light: "https://svgl.app/library/react_light.svg",
      dark: "https://svgl.app/library/react_dark.svg",
    },
  },
  servercomponents: { label: "Server Components" },
  php: {
    label: "PHP",
    icon: {
      light: "https://svgl.app/library/php.svg",
      dark: "https://svgl.app/library/php_dark.svg",
    },
  },
  laravel: {
    label: "Laravel",
    icon: {
      light: "https://svgl.app/library/laravel.svg",
      dark: "https://svgl.app/library/laravel.svg",
    },
  },
  reactnative: {
    label: "React Native",
    icon: {
      light: "https://svgl.app/library/react_light.svg",
      dark: "https://svgl.app/library/react_dark.svg",
    },
  },
  "react-native": {
    label: "React Native",
    icon: {
      light: "https://svgl.app/library/react_light.svg",
      dark: "https://svgl.app/library/react_dark.svg",
    },
  },
  expo: {
    label: "Expo",
    icon: {
      light: "https://svgl.app/library/expo.svg",
      dark: "https://svgl.app/library/expo.svg",
    },
  },
  mysql: {
    label: "MySQL",
    icon: {
      light: "https://svgl.app/library/mysql-icon-light.svg",
      dark: "https://svgl.app/library/mysql-icon-dark.svg",
    },
  },
  nginx: {
    label: "Nginx",
    icon: {
      light: "https://svgl.app/library/nginx.svg",
      dark: "https://svgl.app/library/nginx.svg",
    },
  },
  protobuf: { label: "Protobuf" },
  grpc: { label: "gRPC" },
  java: {
    label: "Java",
    icon: {
      light: "https://svgl.app/library/java.svg",
      dark: "https://svgl.app/library/java.svg",
    },
  },
  graalvm: { label: "GraalVM" },
  spring: {
    label: "Spring",
    icon: {
      light: "https://svgl.app/library/spring.svg",
      dark: "https://svgl.app/library/spring.svg",
    },
  },
  aws: {
    label: "AWS",
    icon: {
      light: "https://svgl.app/library/aws_light.svg",
      dark: "https://svgl.app/library/aws_dark.svg",
    },
  },
  s3: { label: "Amazon S3" },
  linux: {
    label: "Linux",
    icon: {
      light: "https://svgl.app/library/linux.svg",
      dark: "https://svgl.app/library/linux.svg",
    },
  },
  debian: { label: "Debian" },
  htmx: { label: "HTMX" },
  neon: {
    label: "Neon",
    icon: {
      light: "https://svgl.app/library/neon.svg",
      dark: "https://svgl.app/library/neon.svg",
    },
  },
};

export function StackBadge({ item }: { item: string }) {
  const meta = STACK_META[item] ?? { label: item };

  return (
    <Badge variant="outline">
      {meta.icon && (
        <>
          <img
            src={meta.icon.light}
            alt=""
            width={12}
            height={12}
            className="dark:hidden shrink-0"
          />
          <img
            src={meta.icon.dark}
            alt=""
            width={12}
            height={12}
            className="hidden dark:block shrink-0"
          />
        </>
      )}
      {meta.label}
    </Badge>
  );
}