"use client";

import { Card, CardBody } from "@heroui/react";
import { motion } from "framer-motion";

export default function PrivacyCard({
  id,
  title,
  children,
  index = 0,
}: {
  id: string;
  title: string;
  children: React.ReactNode;
  index?: number;
}) {
  const delay = 0.04 + index * 0.05;

  return (
    <motion.div
      id={id}
      className="anchor scroll-mt-28"
      initial={{ opacity: 0, y: 20, filter: "blur(8px)" }}
      whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ type: "spring", stiffness: 240, damping: 24, delay }}
    >
      <Card shadow="sm" className="border rounded-2xl">
        <CardBody className="p-5 text-start">
          <h2 className="text-xl font-extrabold text-primary mb-2">{title}</h2>
          <div className="prose prose-slate max-w-none [&_p]:my-2 [&_ul]:ps-5 [&_ul]:list-disc">
            {children}
          </div>
        </CardBody>
      </Card>
    </motion.div>
  );
}