import type { ChecklistItem } from "@/types/board";

interface ChecklistBarProps {
  checklist: ChecklistItem[];
}

export function ChecklistBar({ checklist }: ChecklistBarProps) {
  if (checklist.length === 0) return null;

  return (
    <div className="flex items-center gap-px">
      {checklist.map((item) => (
        <span
          key={item.id}
          className={`inline-block h-1 w-1.5 rounded-[1px] ${
            item.checked ? "bg-pylon-accent" : "bg-pylon-column"
          }`}
        />
      ))}
    </div>
  );
}