import { useTranslation } from 'react-i18next'

import { ToDo } from '../../models/ToDo'

interface ITodoItem extends ToDo {
  toggleTodo: (id: number) => void
  removeTodo: (id: number) => void
}

const ToDoItem: React.FC<ITodoItem> = (props) => {
  const { id, description, completed, toggleTodo, removeTodo } = props

  const { t } = useTranslation(['home', 'buttons'])
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'row',
        gap: '5px',
        alignItems: 'center',
      }}
    >
      <input
        type='checkbox'
        checked={completed}
        onChange={() => toggleTodo(id)}
      />
      <p
        style={{
          textDecoration: completed ? 'line-through' : 'none',
        }}
      >
        {description}
      </p>

      <button
        onClick={() => removeTodo(id)}
        style={{
          height: '20px',
        }}
      >
        {t('buttons.cancel', { ns: ['buttons'] })}
      </button>
    </div>
  )
}

export default ToDoItem