interface Props {
  current: string;
  onChange: (status: string) => void;
}

const TABS = [
  { key: "all", label: "All" },
  { key: "active", label: "Active" },
  { key: "completed", label: "Done" },
  { key: "failed", label: "Failed" },
];

export default function StatusTabs({ current, onChange }: Props) {
  return (
    <div class="tabs">
      {TABS.map((tab) => (
        <div
          key={tab.key}
          class={`tab${current === tab.key ? " on" : ""}`}
          onClick={() => onChange(tab.key)}
        >
          {tab.label}
        </div>
      ))}
    </div>
  );
}