---
import { getEntry } from 'astro:content';

interface Props {
  element: string;
  size: string;
  color: string;
}

interface FontSymbol {
  discriminant: 'font';
  value: {
    family: string;
    character: string;
  };
}

interface SVGSymbol {
  discriminant: 'svg';
  value: string;
}

type Symbol = FontSymbol | SVGSymbol;

const { element, size, color } = Astro.props;
const entry = await getEntry('elements', element);

if (!entry) {
  console.warn(`Element not found: ${element}`);
}

const symbol = entry?.data.symbol as Symbol | undefined;
---

{
  symbol?.discriminant === 'font' && (
    <span
      class="element font"
      style={`font-family: '${(symbol as FontSymbol).value.family}', sans-serif; font-size: ${size}; color: ${color};`}
    >
      {(symbol as FontSymbol).value.character}
    </span>
  )
}

{
  symbol?.discriminant === 'svg' && (
    <span
      class="element svg"
      style={`width: ${size}; height: ${size}; color: ${color}`}
      set:html={(symbol as SVGSymbol).value}
    />
  )
}

<style>
  .font {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
  }
  .svg {
    display: inline-flex;
    line-height: 1;
    vertical-align: middle;
  }
  .svg :global(svg) {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
</style>
