<script lang="ts">
  import type { Component } from 'svelte'

  interface Props {
    name: string
    icon: Component
  }

  let { name, icon: IconComponent }: Props = $props()
</script>

<div
  class="border-border bg-card text-muted-foreground flex items-center gap-3 rounded-full border p-3 shadow-sm backdrop-blur-sm transition-all duration-300 hover:shadow-md"
>
  <span
    class="bg-muted flex h-10 w-10 items-center justify-center rounded-full p-2 text-lg shadow-inner"
  >
    <IconComponent class="text-primary h-5 w-5" />
  </span>
  <span class="text-foreground font-medium overflow-hidden text-ellipsis whitespace-nowrap">{name}</span>
</div>
