"use client";

import Link, { useLinkStatus } from "next/link";
import type { ReactNode } from "react";
import "./Card.css";

type Props = {
  href: string;
  accentColor: string;
  backgroundColor: string;
  children: ReactNode;
};

function CardBg({ accentColor, backgroundColor, children }: Omit<Props, "href">) {
  const { pending } = useLinkStatus();

  return (
    <div
      className={`Card-bg${pending ? " Card-bg--pending" : ""}`}
      style={
        {
          "--accent-color": accentColor,
          "--accent-color-transparent": `${accentColor}20`,
          "--bg-color": backgroundColor,
        } as React.CSSProperties
      }
    >
      {children}
    </div>
  );
}

export function Card({ href, accentColor, backgroundColor, children }: Props) {
  return (
    <Link href={href} className="Card">
      <CardBg accentColor={accentColor} backgroundColor={backgroundColor}>
        {children}
      </CardBg>
    </Link>
  );
}