import {BarChartProps} from "@/constants/types";



export default function BarChart({ data }: BarChartProps) {
  return (
    <div className="rounded-xl border border-[#14253d] bg-[#0c1a2c]
     p-4  flex flex-col justify-between">
      <div className="flex items-center justify-between mb-4 ">
        <h3 className="text-base font-semibold text-white">TFM requests · monthly</h3>
        <span className="text-xs text-gray-500">2026 · auto-refresh 60s</span>
      </div>
      <hr className="border-[#14253d] mb-6" />

      <div>
        {/* Bars */}
        <div className="flex items-end justify-between h-40 px-2 border-b border-[#1b3454] pb-2">
          {data.map((item, idx) => (
            <div key={idx} className="flex flex-col items-center flex-1 group">
              <div className={`w-5 ${item.height} bg-teal-400 rounded-t transition-all duration-300 group-hover:bg-teal-300`} />
            </div>
          ))}
        </div>

        {/* X-Axis */}
        <div className="flex justify-between pt-3 px-2 text-xs font-medium text-gray-500">
          {data.map((item, idx) => (
            <span key={idx} className="w-5 text-center">{item.month}</span>
          ))}
        </div>
      </div>
    </div>
  );
}