import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"

export function Todo() {
  const todos = [
    { text: "send e-mails", done: false },
    { text: "do the visuals", done: false },
    { text: "write the contract", done: false },
  ]

  return (
    <Card>
      <CardHeader>
        <CardTitle>Todo</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {todos.map((todo, i) => (
            <div key={i} className="flex items-center space-x-2">
              <Checkbox id={`todo-${i}`} />
              <label htmlFor={`todo-${i}`} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                {todo.text}
              </label>
            </div>
          ))}
          <Button className="w-full mt-4" variant="secondary">
            Add Todo
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

