export type TuViSummaryItem = {
  label: string;
  value: string;
  hint?: string;
};

type Props = {
  items: readonly TuViSummaryItem[];
  className?: string;
};

export function TuViSummaryBar({ items, className = "" }: Props) {
  return (
    <div
      className={`rounded-lg border border-[#d4af37]/14 bg-[linear-gradient(180deg,rgba(12,18,32,0.72),rgba(4,7,14,0.85))] p-2 shadow-[inset_0_1px_0_rgba(212,175,55,0.08)] sm:p-2.5 ${className}`}
      aria-label="Tóm tắt mệnh cục"
    >
      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-2.5 lg:grid-cols-5">
        {items.map((item) => (
          <div
            key={item.label}
            title={item.hint}
            className="rounded-md border border-[#d4af37]/10 bg-[#060912]/55 px-2.5 py-2 transition-[border-color] duration-200 hover:border-[#d4af37]/22 sm:px-3 sm:py-2.5"
          >
            <p className="font-ctkp-serif text-[8.5px] font-normal uppercase tracking-[0.2em] text-[#d4af37]/72 sm:text-[9px]">
              {item.label}
            </p>
            <p className="mt-1.5 line-clamp-3 font-ctkp-serif text-[12px] leading-snug tracking-[0.02em] text-white/90 sm:text-[13px]">
              {item.value.trim() ? item.value : "—"}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}