import type { Entry } from "./App";

export type Props = Entry & { onChange: (newVal: number) => void; onDelete: () => void };

export default function Entry({ name, progress, onChange, onDelete }: Props) {
  return (
    <label className={progress === 100 ? "done" : undefined}>
      <span>{name}</span>
      <input
        type="range"
        value={progress}
        min={0}
        max={100}
        onChange={(ev) => onChange(parseInt(ev.target.value))}
      />
      <small>{progress}%</small>
      <button onClick={onDelete}>X</button>
    </label>
  );
}