export const CustomLegendHorizontal = ({ payload } : any) => {
  // Define the desired order for attendance ranges
  const desiredOrder = ['0-5', '6-10', '11-15', '16-20', '21-25', '25+'];
  
  // Reorder payload based on the desired order
  const reorderedPayload = [...payload].sort((a, b) => {
    const aIndex = desiredOrder.indexOf(a.value.replace(' HK', ''));
    const bIndex = desiredOrder.indexOf(b.value.replace(' HK', ''));
    return aIndex - bIndex;
  });
  
  return (
    <ul className="flex flex-wrap justify-center gap-4 mt-4">
      {reorderedPayload.map((entry, index) => (
        <li key={`item-${index}`} className="flex items-center gap-2">
          <span
            className="w-4 h-4 rounded"
            style={{ backgroundColor: entry.color }}
          />
          <span className="text-sm">{entry.value}</span>
        </li>
      ))}
    </ul>
  );
};

export const CustomLegendVertical = ({ payload } : any) => {
  // Define the desired order for attendance ranges
  const desiredOrder = ['0-5', '6-10', '11-15', '16-20', '21-25', '25+'];
  
  // Reorder payload based on the desired order
  const reorderedPayload = [...payload].sort((a, b) => {
    const aIndex = desiredOrder.indexOf(a.value.replace(' HK', ''));
    const bIndex = desiredOrder.indexOf(b.value.replace(' HK', ''));
    return aIndex - bIndex;
  });
  
  return (
    <ul className="flex flex-col items-center gap-2 mt-4">
      {reorderedPayload.map((entry, index) => (
        <li key={`item-${index}`} className="flex items-center gap-2 mr-auto">
          <span
            className="w-4 h-4 rounded"
            style={{ backgroundColor: entry.color }}
          />
          <span className="text-sm">{entry.value}</span>
        </li>
      ))}
    </ul>
  );
};
