<script lang="ts">
  interface Props {
    title: string;
    value: string | number;
    icon?: string;
    trend?: {
      value: number;
      isPositive: boolean;
    };
    description?: string;
    color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error";
  }

  let { title, value, icon, trend, description, color = "primary" }: Props = $props();
</script>

<div class="stats shadow bg-base-100">
  <div class="stat">
    <div class="stat-figure text-{color}">
      {#if icon}
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current">
          {@html icon}
        </svg>
      {/if}
    </div>
    <div class="stat-title">{title}</div>
    <div class="stat-value text-{color}">{value}</div>
    {#if description}
      <div class="stat-desc">{description}</div>
    {/if}
    {#if trend}
      <div class="stat-desc {trend.isPositive ? 'text-success' : 'text-error'}">
        {trend.isPositive ? '↗︎' : '↘︎'} {Math.abs(trend.value)}%
      </div>
    {/if}
  </div>
</div>


