"use client";

import type { Hit } from "@/lib/api";
import { fmtTs } from "@/lib/format";

export function SegmentCard({
  hit,
  onPlay,
  highlight,
  compact = false,
  badge,
}: {
  hit: Hit;
  onPlay: (h: Hit) => void;
  highlight?: boolean;
  compact?: boolean;
  badge?: React.ReactNode;
}) {
  return (
    <button
      onClick={() => onPlay(hit)}
      className={`group flex w-full gap-3 rounded-lg border bg-surface p-2 text-left transition-colors hover:bg-surface-2 ${
        highlight ? "border-accent" : "border-line"
      }`}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={hit.frame}
        alt=""
        className={`${compact ? "h-14 w-24" : "h-20 w-36"} shrink-0 rounded-md bg-black object-cover`}
        loading="lazy"
      />
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2 text-xs text-muted tabular">
          <span className="font-medium text-ink-2">#{hit.rank}</span>
          <span>
            {fmtTs(hit.start)}–{fmtTs(hit.end)}
          </span>
          <span className="ml-auto">{hit.score < 1 ? hit.score.toFixed(3) : hit.score.toFixed(4)}</span>
          {badge}
        </div>
        <div className="truncate text-sm font-medium">{hit.title}</div>
        {!compact && <p className="line-clamp-2 text-xs text-ink-2">{hit.text}</p>}
      </div>
    </button>
  );
}