"use client"
import { useState } from 'react';
import { BarChart, Bar, Cell, ResponsiveContainer } from 'recharts';

import { useTheme } from "next-themes";
import { colors } from "@/lib/colors";
import { useConfig } from "@/hooks/use-config";
const CustomizedEvent = ({ height = 300 }) => {

    const { theme: mode } = useTheme();

    const [data, setData] = useState([
        {
            name: 'Page A',
            uv: 4000,
            pv: 2400,
            amt: 2400,
        },
        {
            name: 'Page B',
            uv: 3000,
            pv: 1398,
            amt: 2210,
        },
        {
            name: 'Page C',
            uv: 2000,
            pv: 9800,
            amt: 2290,
        },
        {
            name: 'Page D',
            uv: 2780,
            pv: 3908,
            amt: 2000,
        },
        {
            name: 'Page E',
            uv: 1890,
            pv: 4800,
            amt: 2181,
        },
        {
            name: 'Page F',
            uv: 2390,
            pv: 3800,
            amt: 2500,
        },
        {
            name: 'Page G',
            uv: 3490,
            pv: 4300,
            amt: 2100,
        },
    ]);

    const [activeIndex, setActiveIndex] = useState(0);
    const activeItem = data[activeIndex];

    const handleClick = (entry: any, index: number) => {
        setActiveIndex(index);
    };

    return (
        <div style={{ width: '100%' }}>
            <p className='text-center text-card-foreground font-base font-medium'>Click each rectangle </p>
            <ResponsiveContainer width="100%" height={height}>
                <BarChart data={data}>
                    <Bar dataKey="uv" onClick={handleClick}>
                        {data.map((entry, index) => (
                            <Cell
                                cursor="pointer"
                                fill={index === activeIndex ? colors.success
                                    :
                                    colors.primary}
                                key={`cell-${index}`}
                            />
                        ))}
                    </Bar>
                </BarChart>
            </ResponsiveContainer>
            <p className="text-center text-card-foreground font-base font-medium pt-2">{`Uv of "${activeItem.name}": ${activeItem.uv}`}</p>
        </div>
    );
};

export default CustomizedEvent;