---
import Icon from "node_modules/astro-icon/components/Icon.astro";

interface Technology {
  name: string;
  colour: string;
  text?: "light" | "dark";
  icon?: string;
}

export const technologies: { [key: string]: Technology } = {
  java: {
    name: "Java",
    colour: "#e76f00",
    icon: "coffee"
  },
  dotnet: {
    name: ".NET",
    colour: "#512bd4",
    icon: "brand-c-sharp",
  },
  go: {
    name: "Go",
    colour: "#00add8",
    icon: "brand-golang",
  },
  mysql: {
    name: "MySQL",
    colour: "#3a75b0",
    icon: "brand-mysql",
  },
  php: {
    name: "PHP",
    colour: "#8892be",
    icon: "brand-php",
  },
  python: {
    name: "Python",
    colour: "#306998",
  },
  typescript: {
    name: "TypeScript",
    colour: "#007acc",
    icon: "brand-typescript",
  },
  azure: {
    name: "Azure",
    colour: "#0089d6",
    icon: "brand-azure",
  },
  ubuntu: {
    name: "Ubuntu",
    colour: "#E95420",
    icon: "brand-ubuntu",
  },
  windows: {
    name: "Windows",
    colour: "#0078d6",
    icon: "brand-windows",
  },
  astro: {
    name: "Astro",
    colour: "#3d50f5",
    icon: "brand-astro",
  },
  wordpress: {
    name: "WordPress",
    colour: "#21759b",
    icon: "brand-wordpress",
  },
  github: {
    name: "GitHub",
    colour: "#181717",
    text: "light",
    icon: "brand-github",
  },
  web: {
    name: "Web",
    colour: "#f7df1e",
    text: "dark",
    icon: "world",
  },
  react: {
    name: "React",
    colour: "#087ea4",
    icon: "brand-react",
  }
};

interface Props {
  // tech must be name of the key of one of the technologies
  code: string;

  size?: "small" | "large";
}

const { code, size } = Astro.props;
if (!(code in technologies)) {
  throw new Error(`Technology code "${code}" is not defined in technologies.`);
}
const tech = technologies[code] as Technology;
---

<span class={`pill-${size ?? "small"} text-${tech.text ?? "light"}`}>
  {
    tech.icon && (
      <Icon name={`tabler:${tech.icon}`} />
    )
  }
  {tech.name}
</span>

<style define:vars={{ colour: tech.colour }}>
  span {
    /*display: inline-block;*/
    background-color: var(--colour);
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 0.5em;
    padding: 0.5em 1em;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .text-dark {
    color: #000;
  }

  .text-light {
    color: #fff;
  }

  .pill-small {
    padding: 0.35em 0.5em;
    border-radius: 0.25em;

    font-size: 0.75em;
  }

  .pill-large {
    padding: 0.35 0.75em;
    border-radius: 0.5em;

    font-size: 0.75em;
  }
</style>