/**
 * Get color classes for an etape based on its position
 * Colors cycle through: yellow (light), green, blue, gray
 */
export const getEtapeColor = (position: number) => {
  const colors = [
    {
      // Light/Yellow
      bg: "bg-yellow-50 dark:bg-yellow-950/20",
      text: "text-yellow-600 dark:text-yellow-300",
      border: "border-yellow-100 dark:border-yellow-900/30",
      indicator: "bg-yellow-400 dark:bg-yellow-500",
    },
    {
      // Green
      bg: "bg-green-50 dark:bg-green-950/20",
      text: "text-green-600 dark:text-green-300",
      border: "border-green-100 dark:border-green-900/30",
      indicator: "bg-green-400 dark:bg-green-500",
    },
    {
      // Blue
      bg: "bg-blue-50 dark:bg-blue-950/20",
      text: "text-blue-600 dark:text-blue-300",
      border: "border-blue-100 dark:border-blue-900/30",
      indicator: "bg-blue-400 dark:bg-blue-500",
    },
    {
      // Gray
      bg: "bg-gray-50 dark:bg-gray-800/20",
      text: "text-gray-600 dark:text-gray-300",
      border: "border-gray-100 dark:border-gray-700/30",
      indicator: "bg-gray-400 dark:bg-gray-500",
    },
  ];

  return colors[position % colors.length];
};
