"use client";

import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";

type Props = {
  Icon?: LucideIcon;
  title: ReactNode;
  body?: ReactNode;
  href?: string;
  external?: boolean;
  className?: string;
  /** Append custom inner content below the body */
  children?: ReactNode;
};

export function GlassCard({
  Icon,
  title,
  body,
  href,
  external,
  className,
  children,
}: Props) {
  const inner = (
    <>
      {/* hover amber radial glow */}
      <div
        aria-hidden
        className="pointer-events-none absolute -bottom-16 -right-16 size-48 rounded-full opacity-0 blur-3xl transition-opacity duration-700 group-hover:opacity-100"
        style={{
          background:
            "radial-gradient(circle, rgba(212,164,55,0.28), transparent 70%)",
        }}
      />
      {Icon ? (
        <div className="grid size-11 place-items-center rounded-full glass-gold transition-all duration-500 group-hover:rotate-[8deg] group-hover:shadow-[0_0_22px_-6px_rgba(212,164,55,0.6)]">
          <Icon className="size-[18px] text-gold-light" strokeWidth={1.4} />
        </div>
      ) : null}
      <h4 className="mt-5 font-display text-xl text-bone transition-colors duration-500 group-hover:text-gold-light md:text-2xl">
        {title}
      </h4>
      {body ? (
        <p className="mt-2 text-sm text-mist text-pretty leading-relaxed">
          {body}
        </p>
      ) : null}
      {children}
      {/* gold underline sweep */}
      <span
        aria-hidden
        className="pointer-events-none absolute bottom-0 left-0 h-px w-0 bg-gradient-to-r from-gold via-gold-light to-transparent transition-all duration-700 group-hover:w-full"
      />
    </>
  );

  const base = `group relative isolate h-full overflow-hidden rounded-2xl border border-bone/10 bg-graphite/40 p-6 backdrop-blur-sm transition-all duration-500 hover:-translate-y-1 hover:border-gold/30 hover:bg-graphite/60 md:p-7 ${className ?? ""}`;

  if (href) {
    return (
      <a
        href={href}
        {...(external
          ? { target: "_blank", rel: "noopener noreferrer" }
          : {})}
        className={base}
      >
        {inner}
      </a>
    );
  }
  return <div className={base}>{inner}</div>;
}