import type { FeedItem } from "../types";

/** Fraction of the video watched, or null if it was never opened. */
export function watchedFraction(item: FeedItem): number | null {
  const { position, duration } = item;
  if (position == null || duration == null || duration <= 0) return null;
  return Math.min(1, Math.max(0, position / duration));
}

/**
 * The red sliver across the bottom of a thumbnail, same idea as YouTube's.
 * Red rather than the sky accent on purpose: the accent means "the action to
 * take" or "currently selected", and this is neither.
 */
export default function WatchBar({ item }: { item: FeedItem }) {
  const f = watchedFraction(item);
  if (f == null || f < 0.01) return null;
  const nearlyDone = f > 0.97;
  return (
    <span
      className="absolute inset-x-0 bottom-0 h-[3px] bg-slate-950/45"
      title={nearlyDone ? "Watched" : `${Math.round(f * 100)}% watched`}
    >
      <span
        className="block h-full bg-red-600"
        style={{ width: `${Math.max(2, f * 100)}%` }}
      />
    </span>
  );
}