Task completed check

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Check } from "lucide-react";

const spring = { type: "spring" as const, stiffness: 300, damping: 30 };

interface TaskCheckProps {
  text?: string;
  color?: string;
}

export default function TaskCheck({
  text = "Pack for the trip",
  color = "#34c759",
}: TaskCheckProps) {
  const [done, setDone] = useState(false);

  return (
    <button
      type="button"
      aria-pressed={done}
      onClick={() => setDone((d) => !d)}
      className="flex items-center gap-3 rounded-2xl bg-white dark:bg-[#1c1c1e] px-5 py-4 text-[#1d1d1f] dark:text-[#f5f5f7] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]"
    >
      {/* --check-bg es el color de la tarjeta: el círculo se funde con ella cuando está vacío */}
      <motion.span
        animate={{ backgroundColor: done ? color : "var(--check-bg)" }}
        className="grid h-6 w-6 place-items-center rounded-full border border-black/10 [--check-bg:#ffffff] dark:border-white/10 dark:[--check-bg:#1c1c1e]"
      >
        <AnimatePresence>
          {done && (
            <motion.span initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} transition={spring}>
              <Check className="h-4 w-4 text-white" />
            </motion.span>
          )}
        </AnimatePresence>
      </motion.span>
      <span className="relative text-sm">
        <span>{text}</span>
        <motion.i
          className="absolute left-0 top-1/2 h-px bg-[#1d1d1f] dark:bg-[#f5f5f7]"
          animate={{ width: done ? "100%" : "0%" }}
          transition={spring}
        />
      </span>
    </button>
  );
}