"use client";

import * as React from "react";

// Import recharts components
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  ResponsiveContainer,
  Cell
} from 'recharts';

export function CostReductionChart() {
  // Data for the chart
  const data = [
    { name: 'Traditional Cloud', cost: 100000 },
    { name: 'Our Solution', cost: 10000 },
  ];

  // Colors that align with the site's aesthetic
  // Using muted foreground and primary colors
  const COLORS = ['oklch(0.556 0 0)', 'oklch(0.340 0 0)']; // muted-foreground and primary

  return (
    <div className="w-full py-8">
      <h2 className="text-4xl font-bold mb-16">Cost Reduction</h2>
      
      <div className="h-64 md:h-80">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={data}
            margin={{
              top: 20,
              right: 30,
              left: 20,
              bottom: 5,
            }}
            layout="vertical"
          >
            <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} strokeOpacity={0.3} />
            <XAxis 
              type="number" 
              tickFormatter={(value) => `${value.toLocaleString()}`}
              domain={[0, 120000]}
              tick={{ fontSize: 12 }}
            />
            <YAxis 
              type="category" 
              dataKey="name" 
              tickLine={false} 
              axisLine={false}
              width={120}
              tick={{ fontSize: 12 }}
            />
            <Bar 
              dataKey="cost" 
              name="Monthly Cost" 
              radius={[0, 4, 4, 0]}
              barSize={40}
            >
              {data.map((entry, index) => (
                <Cell 
                  key={`cell-${index}`} 
                  fill={COLORS[index]} 
                  fillOpacity={0.8}
                />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
      
      <div className="mt-8 text-center">
        <div className="text-2xl font-bold" style={{ color: 'oklch(0.205 0 0)' }}>
          99.65% ↓
        </div>
        <div className="text-sm text-muted-foreground mt-2">
          *Based on typical workloads. Your savings may vary.
        </div>
      </div>
    </div>
  );
}