import {
  Tooltip,
  Legend,
  PieChart,
  Pie,
  Sector,
  DefaultLegendContent,
} from 'recharts'

<PieChart width={320} height={210}>
  <Pie
    cx="45%"
    cy="50%"
    innerRadius={65}
    outerRadius={100}
    paddingAngle={2}
    dataKey="value"
    data={chartData}
    shape={(props) => (
      <Sector
        {...props}
        className="chart-cell"
        fill={colors[props.name] ?? '#8884d8'}
      />
    )}
  />
  <Legend
    layout="vertical"
    iconType="square"
    iconSize={6}
    formatter={(value) => (
      <span className="ml-xs body-sm text-secondary capitalize">{value}</span>
    )}
    align="right"
    verticalAlign="middle"
    itemSorter={(item) => {
      const index = chartData.findIndex((entry) => entry.name === item.value)
      return index !== -1 ? index : Infinity
    }}
    content={(props) => {
      const payload = chartData.map((entry) => ({
        color: colors[entry.name] ?? '#8884d8',
        payload: entry,
        type: props.iconType,
        value: entry.name,
      }))
      return <DefaultLegendContent {...props} payload={payload} />
    }}
  />
  <Tooltip
    content={(props) => {
      const activeIndex = props.activeIndex ? Number(props.activeIndex) : -1
      const entry = activeIndex !== -1 ? chartData[activeIndex] : null
      return (
        <div
          className="chart-tooltip"
          style={{
            visibility: entry ? 'visible' : 'hidden',
          }}
        >
          <div className="flex items-center">
            <div
              className="w-sm h-sm rounded-full mr-xs"
              style={{
                backgroundColor: colors[entry.name] ?? '#8884d8',
              }}
            />
            <span className="capitalize">{entry?.name}</span>
          </div>
          <span className="font-semibold">{entry?.value.toLocaleString()}</span>
        </div>
      )
    }}
  />
</PieChart>