import React from "react";

interface Metric {
  label: string;
  value: string;
}

interface MetricsBarProps {
  metrics: Metric[];
}

const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
  const accentColors = [
    "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
    "from-[var(--color-success)] to-[var(--color-success-dark)]",
    "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
  ];

  return (
    <div className="max-w-5xl mx-auto -mt-12 sm:-mt-16 px-6">
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 shadow-xl p-6 backdrop-blur-sm">
        {metrics.map((metric, index) => {
          const gradient = accentColors[index % accentColors.length];
          return (
            <div key={metric.label} className="text-center sm:text-left relative">
              <div className={`absolute left-0 top-0 w-1 h-full bg-gradient-to-b ${gradient} rounded-full`} />
              <div className="pl-4">
                <div className={`text-3xl font-semibold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>
                  {metric.value}
                </div>
                <div className="text-sm uppercase tracking-[0.2em] text-slate-500 mt-2">
                  {metric.label}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default MetricsBar;