import type { Book, ReadingStatus } from "../api";

const STATUS: Record<ReadingStatus, { label: string; style: string }> = {
  not_started: { label: "Not started", style: "bg-slate-100 text-slate-700" },
  reading: { label: "Reading", style: "bg-amber-100 text-amber-800" },
  finished: { label: "Finished", style: "bg-emerald-100 text-emerald-800" },
};

export function StatusBadge({ status }: { status: ReadingStatus }) {
  return (
    <span
      className={`rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap ${STATUS[status].style}`}
    >
      {STATUS[status].label}
    </span>
  );
}

export function ProgressBar({ book }: { book: Book }) {
  const percent = Math.round((book.current_page / book.total_pages) * 100);
  return (
    <div className="mt-3">
      <progress
        className="h-2 w-full accent-indigo-600"
        value={book.current_page}
        max={book.total_pages}
        aria-label={`Reading progress for ${book.title}`}
      />
      <p className="text-sm text-slate-600">{`${book.current_page} / ${book.total_pages} (${percent}%)`}</p>
    </div>
  );
}