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 className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
      <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>
  );
}