import { SectionMissingSiteTag } from "../_lib/empty-states";
import type { BehavioralViewModel } from "../_lib/types";

interface Props {
  behavioral: BehavioralViewModel;
  isSiteTagInstalled: boolean;
}

export function Behavioral({ behavioral, isSiteTagInstalled }: Props) {
  if (!behavioral.available) {
    return <SectionMissingSiteTag isInstalled={isSiteTagInstalled} />;
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
      {behavioral.cards.map((card) => (
        <div key={card.title} className="bg-white border border-slate-200 rounded-xl p-5 shadow-subtle">
          <div className="flex items-center justify-between mb-3.5">
            <span className="text-[13px] font-semibold text-slate-900">{card.title}</span>
            <span className="inline-flex items-center gap-1.5 text-[10px] font-semibold text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-full uppercase tracking-[0.04em]">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse inline-block" />
              Live
            </span>
          </div>

          <div className="text-[32px] font-bold text-slate-900 leading-none tabular-nums tracking-tight mb-1">
            {card.stat}
          </div>
          <div className="text-[12px] text-slate-500 mb-4">{card.statMeta}</div>

          <div className="flex flex-col gap-1.5">
            {card.items.map((item) => (
              <div key={item.url} className="flex items-center justify-between px-3 py-2 bg-slate-50 rounded-md text-[11px]">
                <span className="font-mono text-slate-700 truncate flex-1 min-w-0">{item.url}</span>
                <span className="font-semibold text-red-600 tabular-nums ml-3 shrink-0">{item.count}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}
