<script lang="ts">
  interface Props {
    status?: "online" | "offline" | "ausente" | "externo" | "em_reuniao";
    size?: "sm" | "md" | "lg";
  }

  let { status = "offline", size = "md" }: Props = $props();

  const sizeClasses = {
    sm: "w-3 h-3",
    md: "w-4 h-4",
    lg: "w-5 h-5",
  };

  const statusConfig = {
    online: {
      color: "bg-success",
      borderColor: "border-success",
      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
        <circle cx="12" cy="12" r="10" fill="#10b981"/>
        <path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>`,
      label: "🟢 Online",
    },
    offline: {
      color: "bg-base-300",
      borderColor: "border-base-300",
      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
        <circle cx="12" cy="12" r="10" fill="#9ca3af"/>
        <path d="M8 8l8 8M16 8l-8 8" stroke="white" stroke-width="2" stroke-linecap="round"/>
      </svg>`,
      label: "⚫ Offline",
    },
    ausente: {
      color: "bg-warning",
      borderColor: "border-warning",
      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
        <circle cx="12" cy="12" r="10" fill="#f59e0b"/>
        <circle cx="12" cy="6" r="1.5" fill="white"/>
        <path d="M12 10v4" stroke="white" stroke-width="2" stroke-linecap="round"/>
      </svg>`,
      label: "🟡 Ausente",
    },
    externo: {
      color: "bg-info",
      borderColor: "border-info",
      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
        <circle cx="12" cy="12" r="10" fill="#3b82f6"/>
        <path d="M8 12h8M12 8v8" stroke="white" stroke-width="2" stroke-linecap="round"/>
      </svg>`,
      label: "🔵 Externo",
    },
    em_reuniao: {
      color: "bg-error",
      borderColor: "border-error",
      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
        <circle cx="12" cy="12" r="10" fill="#ef4444"/>
        <rect x="8" y="8" width="8" height="8" fill="white" rx="1"/>
      </svg>`,
      label: "🔴 Em Reunião",
    },
  };

  const config = $derived(statusConfig[status]);
</script>

<div
  class={`${sizeClasses[size]} rounded-full relative flex items-center justify-center`}
  style="box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 2px solid white;"
  title={config.label}
  aria-label={config.label}
>
  {@html config.icon}
</div>

