"use client";

import * as React from "react";

type GradientStop = { offset: string; color: string; opacity?: number };

type MarketingChartGradientsProps = {
  id: string;
  stops: GradientStop[];
  direction?: "horizontal" | "vertical";
};

export function MarketingChartGradient({
  id,
  stops,
  direction = "horizontal",
}: MarketingChartGradientsProps) {
  return (
    <linearGradient
      id={id}
      x1="0"
      y1="0"
      x2={direction === "horizontal" ? "1" : "0"}
      y2={direction === "horizontal" ? "0" : "1"}
    >
      {stops.map((stop) => (
        <stop
          key={stop.offset}
          offset={stop.offset}
          stopColor={stop.color}
          stopOpacity={stop.opacity ?? 1}
        />
      ))}
    </linearGradient>
  );
}

export const MARKETING_GRADIENT_IDS = {
  primary: "marketing-gradient-primary",
  success: "marketing-gradient-success",
  danger: "marketing-gradient-danger",
  amber: "marketing-gradient-amber",
  indigo: "marketing-gradient-indigo",
} as const;

export function MarketingChartGradientDefs() {
  return (
    <defs>
      <MarketingChartGradient
        id={MARKETING_GRADIENT_IDS.primary}
        stops={[
          { offset: "0%", color: "#8B83FF" },
          { offset: "100%", color: "#6C63FF" },
        ]}
      />
      <MarketingChartGradient
        id={MARKETING_GRADIENT_IDS.success}
        stops={[
          { offset: "0%", color: "#4ADE80" },
          { offset: "100%", color: "#22C55E" },
        ]}
      />
      <MarketingChartGradient
        id={MARKETING_GRADIENT_IDS.danger}
        stops={[
          { offset: "0%", color: "#FF8A8A" },
          { offset: "100%", color: "#FF6B6B" },
        ]}
      />
      <MarketingChartGradient
        id={MARKETING_GRADIENT_IDS.amber}
        stops={[
          { offset: "0%", color: "#FBBF24" },
          { offset: "100%", color: "#F59E0B" },
        ]}
      />
      <MarketingChartGradient
        id={MARKETING_GRADIENT_IDS.indigo}
        stops={[
          { offset: "0%", color: "#818CF8" },
          { offset: "100%", color: "#6366F1" },
        ]}
      />
    </defs>
  );
}
