import * as React from "react";
import { TodoData } from "./TodoData";

type Props = {
  item: TodoData;
  onCheck: (item: TodoData, checked: boolean) => void;
};

export const TodoItem = ({ item, onCheck }: Props) => {
  return (
    <label className="panel-block">
      <input
        type="checkbox"
        checked={item.done}
        onChange={(e) => onCheck(item, e.target.checked)}
      />
      <span className={item.done ? "has-text-grey-light" : ""}>
        {item.text}
      </span>
    </label>
  );
};