import React from 'react';
import PropTypes from 'prop-types';

// Call once to create gradient, then use in your SVG's
const SvgGradient = ({ gradientId, startGradientColor, endGradientColor }) => (
  <svg
    role="img"
    aria-labelledby="svgGradient"
    xmlns="http://www.w3.org/2000/svg"
    className="invisible"
    width="0"
    height="0"
  >
    <title id="svgGradient">SVG Gradient</title>
    <defs>
      <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
        <stop stopColor={startGradientColor} offset="25%" />
        <stop stopColor={endGradientColor} offset="70%" />
      </linearGradient>
    </defs>
  </svg>
);

SvgGradient.propTypes = {
  gradientId: PropTypes.string,
  startGradientColor: PropTypes.string,
  endGradientColor: PropTypes.string,
};

SvgGradient.defaultProps = {
  gradientId: 'diagonal-gradient',
  startGradientColor: '#4ecdc4',
  endGradientColor: '#1a535c',
};

export default SvgGradient;
