import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "react";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  interactive?: boolean;
}

export function Card({ className, interactive, ...props }: CardProps) {
  return (
    <div
      className={cn(
        "relative rounded-3xl border border-slate-200/70 bg-white shadow-soft backdrop-blur-sm transition-all duration-300 ease-snappy dark:border-slate-800/80 dark:bg-slate-900/70",
        "before:pointer-events-none before:absolute before:inset-0 before:rounded-3xl before:opacity-0 before:transition-opacity before:duration-500 before:[background:radial-gradient(ellipse_at_95%_50%,rgba(99,102,241,0.18)_0%,transparent_65%)]",
        interactive &&
          "hover:-translate-y-1 hover:border-slate-300 hover:shadow-card hover:before:opacity-100 dark:hover:border-slate-700",
        className,
      )}
      {...props}
    />
  );
}

export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("p-6 sm:p-7", className)} {...props} />;
}