import React from 'react'
import { theme } from '@planview/pv-tokens'

const gradientConfigs: Record<'anvi' | 'anvi-inverse', string[]> = {
    anvi: [theme.iconAnviStart, theme.iconAnviEnd],
    'anvi-inverse': [theme.iconAnviInverseStart, theme.iconAnviInverseEnd],
}

export const generateGradientId = (name: string) => `pvds-icon-gradient-${name}`

export const createSVGGradient = (
    gradientType: 'anvi' | 'anvi-inverse',
    id: string
) => {
    const colors = gradientConfigs[gradientType]
    return (
        <linearGradient id={id} x1="100%" y1="0%" x2="0" y2="100%">
            {colors.map((color, index) => (
                <stop
                    key={index}
                    offset={`${(index / (colors.length - 1)) * 100}%`}
                    style={{ stopColor: color, stopOpacity: 1 }}
                />
            ))}
        </linearGradient>
    )
}