"use client";

import { ReactNode } from "react";

type BarPoint = { k: string; v: number };

type BarCardProps = {
  title: ReactNode;
  data: BarPoint[];
  unit?: string;
  /** Right-aligned action node in the card head (e.g., a small ghost button). */
  action?: ReactNode;
  className?: string;
};

export function BarCard({ title, data, unit = "건", action, className = "" }: BarCardProps) {
  const sum = data.reduce((acc, d) => acc + d.v, 0);
  const max = Math.max(...data.map((d) => d.v), 1);

  return (
    <div className={`v5-card ${className}`.trim()}>
      <div className="v5-card-head">
        <div>
          <div className="v5-card-title">{title}</div>
          <div style={{ fontSize: "1.1rem", fontWeight: 800, letterSpacing: "-.02em", marginTop: ".15rem" }}>
            {sum.toLocaleString("ko-KR")}
            <span style={{ fontSize: ".62rem", fontWeight: 600, color: "var(--v5-text-muted)", marginLeft: ".25rem" }}>
              {unit}
            </span>
          </div>
        </div>
        {action}
      </div>
      <div className="v5-bars">
        {data.map((d, i) => (
          <div
            key={i}
            className="v5-bar"
            style={{ height: `${Math.max(2, (d.v / max) * 100)}%` }}
            title={`${d.k}: ${d.v.toLocaleString("ko-KR")}${unit}`}
          />
        ))}
      </div>
      <div className="v5-bars-ax">
        {data.map((d, i) => (
          <span key={i}>{d.k}</span>
        ))}
      </div>
    </div>
  );
}
