---
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 {
    background-color: var(--colour);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.15) 100%);
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 0.5em 1em;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2);

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  }

  .text-dark {
    color: #000;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }

  .text-light {
    color: #fff;
  }

  .pill-small {
    padding: 2px 8px;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }

  .pill-large {
    padding: 4px 12px;
    font-size: 0.85rem;
  }
</style>