import React from 'react';

interface StatProps {
  icon: React.ReactNode;
  value: string;
  label: string;
  gap: string;
}

const Stat: React.FC<StatProps> = ({ icon, value, label, gap }) => (
  <button
    className={`flex items-center md:bg-slate-200 text-left py-1 px-2 ${gap} rounded-md border-0`}>
    <span className="w-3.5 h-3.5 mr-1.5 flex items-center justify-center text-[#45556C]">{icon}</span>
    <span className="text-[#45556C] text-xs">
      {value} <span className="hidden md:inline">{label}</span>
    </span>
  </button>
);

interface ProjectStatsProps {
  stats: StatProps[];
}

const ProjectStats: React.FC<ProjectStatsProps> = ({ stats }) => {
  return (
    <div className="flex items-center self-stretch gap-1 order-2">
      {stats.map((stat, index) => (
        <Stat key={index} {...stat} />
      ))}
    </div>
  );
};

export default ProjectStats;