import type { VisualNovelRunSnapshot } from '../../../packages/shared/src/contracts/visualNovel';

type VisualNovelAttributePanelProps = {
  run: VisualNovelRunSnapshot;
};

export function VisualNovelAttributePanel({ run }: VisualNovelAttributePanelProps) {
  const metrics = Object.entries(run.metrics);

  if (metrics.length === 0) {
    return (
      <div className="rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/74 px-4 py-5 text-center text-sm font-semibold text-[var(--platform-text-soft)]">
        暂无属性
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {metrics.map(([key, value]) => (
        <div key={key}>
          <div className="mb-1 flex items-center justify-between text-xs font-bold text-[var(--platform-text-soft)]">
            <span>{key}</span>
            <span>{value}</span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-[var(--platform-track-fill)]">
            <div
              className="h-full rounded-full bg-[var(--platform-button-primary-solid)]"
              style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}

export default VisualNovelAttributePanel;