import React from "react";

export const InsightCard = ({ title, value, subtitle, items, actionButton }) => {
  return (
    <div className="relative flex min-h-[180px] flex-col gap-2.5 overflow-hidden rounded-[18px] border border-[var(--line)] bg-gradient-to-b from-white/4 to-white/2 p-4 shadow-[0_10px_30px_rgba(0,0,0,0.35)]">
      <div
        className="pointer-events-none absolute inset-[-1px] opacity-55"
        style={{
          background: "radial-gradient(600px 280px at 20% 0%, rgba(106,166,255,0.14), transparent 60%)",
        }}
      />
      <div className="relative flex flex-1 flex-col gap-2.5">
        <h3 className="m-0 text-sm font-medium text-[var(--text)]">{title}</h3>
        {value && <div className="text-[28px] font-medium text-[var(--text)]">{value}</div>}
        {subtitle && <div className="text-xs text-[var(--muted)]">{subtitle}</div>}
        {items && items.length > 0 && (
          <div className="mt-2 flex flex-col gap-2">
            {items.map((item, idx) => (
              <div
                key={idx}
                className="flex items-center justify-between gap-2.5 rounded-xl border border-[var(--line)] bg-white/2 px-2.5 py-2 text-xs text-[var(--text)]"
              >
                <span>{item.label}</span>
                {item.value && <span className="text-[var(--muted)]">{item.value}</span>}
              </div>
            ))}
          </div>
        )}
        {actionButton && (
          <div className="mt-auto flex items-center justify-between border-t border-[var(--line)] pt-3">
            <div className="flex items-center gap-2">
              {actionButton.element || actionButton}
            </div>
            {actionButton.info && (
              <div className="text-xs text-[var(--muted)]">{actionButton.info}</div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};
