import React from 'react';
import { Shape } from '../../common/components/shape';
import { theme } from '../../app/theme';
import { TVendor } from '../../common/types';

export type TProps = {
  vendor?: TVendor;
};

export const Wave2: React.FC<TProps> = props => {
  const { vendor } = props;

  const isSpotfy = vendor === 'spotify';

  const colorTop = isSpotfy ? theme.colors.ebonyClay2 : theme.colors.ebonyClay3;
  const colorMiddle = isSpotfy
    ? theme.colors.nileBlue
    : theme.colors.martinique4;
  const colorBottom = isSpotfy ? theme.colors.stromboli : theme.colors.finn;

  return (
    <>
      <Shape
        name="wave2"
        gradient={[
          { offset: 0, color: colorTop, opacity: 1 },
          { offset: 0.5, color: colorMiddle, opacity: 1 },
          { offset: 1, color: colorBottom, opacity: 1 },
        ]}
        curveTopHeight={173}
        curveBottomHeight={50}
        maxHeight={249}
        data={[
          // photoshop zoom 300%
          { x: 0, y1: 170, y2: 17 },
          { x: 100, y1: 173, y2: 18 },
          { x: 200, y1: 150, y2: 17 },
          { x: 300, y1: 150, y2: 15 },
          { x: 400, y1: 150, y2: 12 },
          { x: 450, y1: 150, y2: 10 },
          { x: 500, y1: 150, y2: 5 },
          { x: 600, y1: 150, y2: 0 },
          { x: 700, y1: 90, y2: 5 },
          { x: 800, y1: 86, y2: 10 },
          { x: 900, y1: 80, y2: 21 },
          { x: 1000, y1: 76, y2: 31 },
          { x: 1100, y1: 75, y2: 39 },
          { x: 1200, y1: 74, y2: 45 },
          { x: 1300, y1: 73, y2: 49 },
          { x: 1400, y1: 64, y2: 50 },
          { x: 1500, y1: 40, y2: 47 },
        ]}
      />
    </>
  );
};