import React from 'react';
import { BarChart, Bar, Cell } from 'recharts';

function FunnelGraphSmall({ data }) {
  return (
    <div
      className="rounded-md flex items-center justify-center p-2"
      style={{ backgroundColor: 'rgba(62, 170, 175, 0.2)' }}
    >
      <BarChart width={50} height={40} data={data}>
        <Bar
          dataKey="sessionsCount"
          maxBarSize={6}
          background={{ fill: '#DDDDDD' }}
        >
          {
            data.map((entry, index) => (
              <Cell cursor="pointer" fill="#3EAAAF" key={`cell-${index}`} />
            ))
          }
        </Bar>
      </BarChart>
    </div>
  );
}

export default FunnelGraphSmall;