import React, { useId } from "react";

export type StatsDisclosureCardProps = {
  title: string;
  value: string;
  description: string;
  accentClass: string;
  icon: React.ReactNode;
  expanded: boolean;
  onToggle: () => void;
  children: React.ReactNode;
};

/**
 * A summary card that reveals supporting detail.
 *
 * The whole card is deliberately a native button so the visual affordance and
 * keyboard affordance are identical. Detail stays outside the button, keeping
 * links inside the panel valid and independently focusable.
 */
export function StatsDisclosureCard({
  title,
  value,
  description,
  accentClass,
  icon,
  expanded,
  onToggle,
  children,
}: StatsDisclosureCardProps): React.ReactElement {
  const panelId = useId();

  return (
    <div className="bwvs:legacy-space-y-2">
      <button
        type="button"
        className={`bwvs:group bwvs:w-full bwvs:cursor-pointer bwvs:rounded-xl bwvs:legacy-border bwvs:border-slate-200 bwvs:bg-white bwvs:p-4 bwvs:text-left bwvs:transition-all bwvs:hover:shadow-md bwvs:focus:outline-hidden bwvs:focus-visible:ring-2 bwvs:focus-visible:ring-blue-500 bwvs:focus-visible:ring-offset-2 bwvs:sm:p-6 ${accentClass}`}
        onClick={onToggle}
        aria-expanded={expanded}
        aria-controls={panelId}
      >
        <div className="bwvs:flex bwvs:items-start bwvs:justify-between">
          <div>
            <p className="bwvs:text-xs bwvs:font-medium bwvs:uppercase bwvs:tracking-wider bwvs:text-slate-500">
              {title}
            </p>
            <p className="bwvs:mt-2 bwvs:text-3xl bwvs:font-bold bwvs:text-slate-900 bwvs:sm:text-4xl">
              {value}
            </p>
          </div>
          <div className="bwvs:rounded-lg bwvs:p-3">{icon}</div>
        </div>
        <div className="bwvs:mt-3 bwvs:flex bwvs:items-center bwvs:justify-between">
          <p className="bwvs:text-xs bwvs:text-slate-500">{description}</p>
          <svg
            className={`bwvs:h-4 bwvs:w-4 bwvs:text-slate-400 bwvs:transition-transform ${expanded ? "bwvs:rotate-180" : ""}`}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M19 9l-7 7-7-7"
            />
          </svg>
        </div>
      </button>
      <div id={panelId} hidden={!expanded}>
        {children}
      </div>
    </div>
  );
}

export default StatsDisclosureCard;