```tsx
// src/components/TodoItem.tsx
import React from 'react';
import styles from '../styles/TodoItem.module.css';

interface TodoItemProps {
  id: string;
  text: string;
  completed: boolean;
  onToggle: (id: string) => void;
  onDelete: (id: string) => void;
}

export const TodoItem: React.FC<TodoItemProps> = ({ id, text, completed, onToggle, onDelete }) => (
  <div className={styles.todoItem}>
    <input type='checkbox' checked={completed} onChange={() => onToggle(id)} />
    <span className={completed ? styles.completed : ''}>{text}</span>
    <button onClick={() => onDelete(id)}>Delete</button>
  </div>
);
```