Untitled

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

const KeywordRankingChart = () => {
  const data = [
    { name: 'Before Optimization', 'Average Ranking': 15.4, 'First Page Keywords': 0 },
    { name: 'After Optimization', 'Average Ranking': 7.3, 'First Page Keywords': 10 }
  ];

  return (
    <Card className="w-full max-w-2xl mx-auto shadow-lg">
      <CardHeader>
        <CardTitle className="text-xl font-bold">BNP Bali Keyword Ranking Improvement</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={data}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis label={{ value: 'Ranking Position', angle: -90, position: 'insideLeft' }} />
              <Tooltip />
              <Legend />
              <Line 
                type="monotone" 
                dataKey="Average Ranking" 
                stroke="#8884d8" 
                strokeWidth={3}
                activeDot={{ r: 8 }}
              />
            </LineChart>
          </ResponsiveContainer>
          
          <div className="flex flex-col justify-center space-y-4 p-4">
            <div className="bg-blue-50 p-4 rounded-lg">
              <h3 className="text-lg font-semibold">Keyword Ranking Metrics</h3>
              <ul className="list-disc pl-5">
                <li>Initial Average Ranking: 15.4</li>
                <li>Improved Average Ranking: 7.3</li>
                <li>First Page Keywords: 0 → 10 out of 15</li>
              </ul>
            </div>
            <div className="bg-green-50 p-4 rounded-lg">
              <h3 className="text-lg font-semibold">Key Strategies</h3>
              <ul className="list-disc pl-5">
                <li>Refined keyword usage</li>
                <li>Focus on long-tail keywords</li>
                <li>Optimized blog post content</li>
              </ul>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default KeywordRankingChart;