// Krono - Versión para Kiara
import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Bell } from "lucide-react";

const tasks = [
  {
    title: "Dar de comer",
    frequency: "Cada 6 horas",
  },
  {
    title: "Rellenar agua",
    frequency: "Cada 5 horas",
  },
  {
    title: "Bañar a Kiara",
    frequency: "2 veces al mes",
  },
  {
    title: "Cortar garras",
    frequency: "1 vez al mes",
  },
  {
    title: "Cita con el veterinario",
    frequency: "Cada 12 meses",
  },
];

export default function KronoApp() {
  return (
    <div className="min-h-screen bg-pink-100 flex flex-col items-center p-6">
      <h1 className="text-3xl font-bold text-rose-500 mb-4">
        Hola Kiara, hoy toca cuidarte con amor
      </h1>
      <div className="grid gap-4 w-full max-w-md">
        {tasks.map((task, index) => (
          <Card key={index} className="rounded-2xl shadow-md bg-white">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-xl font-semibold text-rose-700">{task.title}</h2>
                  <p className="text-sm text-gray-600">{task.frequency}</p>
                </div>
                <Button variant="outline" className="text-xs">
                  <Bell className="h-4 w-4 mr-2" /> Recordar
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}