<script lang="ts">
  import type { HistoryEntry } from "$lib/types";

  let { entry, name }: { entry: HistoryEntry; name?: string } = $props();

  function formatDate(iso: string): string {
    return new Date(iso).toLocaleDateString(undefined, {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  }

  function formatTime(iso: string): string {
    return new Date(iso).toLocaleTimeString(undefined, {
      hour: "2-digit",
      minute: "2-digit",
    });
  }
</script>

<li class:has-name={!!name}>
  {#if name}
    <span class="name">{name}</span>
  {/if}
  <div class="meta">
    <span class="confidence">{(entry.confidence * 100).toFixed(0)}%</span>
    <span class="when">
      <span>{formatDate(entry.detectedAt)}</span>
      <span>{formatTime(entry.detectedAt)}</span>
    </span>
  </div>
</li>

<style>
  li {
    background: var(--bg-paper);
    border: 2px solid var(--bg-near-black);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    &.has-name {
      justify-content: space-between;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: 4px;
      border: 1.5px dashed var(--accent-amber);
      pointer-events: none;
    }

    .name {
      font-weight: 700;
    }

    .meta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.2rem;
    }

    .confidence {
      color: var(--brand-red);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      font-size: 0.9rem;
    }

    .when {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.05rem;
      font-variant-numeric: tabular-nums;
      font-size: 0.8rem;
      opacity: 0.6;
    }
  }
</style>