import React from 'react';
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from 'recharts';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Info, Database } from 'lucide-react';
import { Button } from '../ui/button';

const data = [
  { name: 'Mon', value: 30 },
  { name: 'Tue', value: 45 },
  { name: 'Wed', value: 15 },
  { name: 'Thu', value: 25 },
  { name: 'Fri', value: 10 },
  { name: 'Sat', value: 35 },
  { name: 'Sun', value: 20 },
];

export function InfoChart() {
  return (
    <Card className="col-span-1 shadow-sm">
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <div className="flex items-center gap-2">
          <Info className="w-5 h-5 text-blue-600" />
          <CardTitle className="text-base font-semibold">Information</CardTitle>
        </div>
        <Button variant="ghost" size="icon" className="h-8 w-8 bg-blue-50 text-blue-600 hover:bg-blue-100 rounded-lg">
          <Database className="w-4 h-4" />
        </Button>
      </CardHeader>
      <CardContent>
        <div className="text-xs text-muted-foreground mb-4">System data overview and metrics</div>
        <div className="h-[120px] w-full">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={data}>
              <XAxis 
                dataKey="name" 
                stroke="#888888" 
                fontSize={10} 
                tickLine={false} 
                axisLine={false} 
                hide
              />
              <Tooltip 
                contentStyle={{ background: '#1e3a8a', border: 'none', borderRadius: '8px', color: '#fff' }}
                cursor={{ fill: '#f3f4f6' }}
              />
              <Bar 
                dataKey="value" 
                fill="#3b82f6" 
                radius={[4, 4, 4, 4]} 
                barSize={6}
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}