import React from 'react';

const IMG_BASE = '/api/protein/plots';
const CACHE_BUST = '?v=20260625';

const plots = [
  { name: 'Structure Similarity', file: 'Structure-similarity.png' },
  { name: 'Function Rank Correlation vs. Structure Similarity', file: 'Function-rank-correlation.png' },
  { name: 'Fidelity Distribution', file: 'Fidelity-distribution.png' },
  { name: 'Unique State Cluster Distribution', file: 'Unique-state-cluster-distribution.png' },
];

export const StaticDistributionPlots: React.FC = () => {
  return (
    <div style={{ columns: '400px', columnGap: '1.5rem' }}>
      {plots.map(({ name, file }) => (
        <div
          key={file}
          style={{ breakInside: 'avoid', marginBottom: '1.5rem' }}
          className="border border-gray-200 rounded-2xl bg-white shadow-sm hover:border-slate-900 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 overflow-hidden"
        >
          <div className="px-4 pt-5 pb-2 text-xl font-semibold text-slate-900">{name}</div>
          <div className="px-4 pb-4">
            <img
              src={`${IMG_BASE}/${file}${CACHE_BUST}`}
              alt={name}
              style={{ width: '100%', height: 'auto', display: 'block' }}
            />
          </div>
        </div>
      ))}
    </div>
  );
};