<template>
  <div
    :style="{ backgroundColor: stringToColour(props.name) } "
    class="fit flex items-center justify-center text-white"
    > 
    {{ props.name ? props.name.substring(0, 1) : '' }}
  </div>
</template>

<script setup lang="ts">

  const props = defineProps<{
    name: string
  }>()

  const stringToColour = (str: string) => {
    if (!str) return '#eee'
    let hash = 0
    str.split('').forEach(char => {
      hash = char.charCodeAt(0) + ((hash << 5) - hash)
    })
    let colour = '#'
    for (let i = 0; i < 3; i++) {
      const value = (hash >> (i * 8)) & 0xff
      colour += value.toString(16).padStart(2, '0')
    }
    return colour
  }

</script>

<style>
</style>
