/** LinearGradient wrapper with the AURA brand gradients. */
import React from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {GRADIENTS} from '../theme/colors';

interface Props {
  children?: React.ReactNode;
  style?: object;
  colors?: string[];
  angle?: number; // 0-360; 135 = brand default
}

/** Convert angle to start/end points (react-native-linear-gradient format). */
function pointsForAngle(angle: number): {start: {x: number; y: number}; end: {x: number; y: number}} {
  const rad = (angle * Math.PI) / 180;
  const x = Math.cos(rad);
  const y = Math.sin(rad);
  return {
    start: {x: 0.5 - x / 2, y: 0.5 - y / 2},
    end: {x: 0.5 + x / 2, y: 0.5 + y / 2},
  };
}

export function Gradient({
  children,
  style,
  colors = GRADIENTS.primary,
  angle = 135,
}: Props): React.JSX.Element {
  const {start, end} = pointsForAngle(angle);
  return (
    <LinearGradient start={start} end={end} colors={colors as unknown as string[]} style={style}>
      {children}
    </LinearGradient>
  );
}