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 Wave1Top: 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="wave1-top"
        gradient={[
          { offset: 0, color: colorTop, opacity: 1 },
          { offset: 0.3687, color: colorMiddle, opacity: 1 },
          { offset: 1, color: colorBottom, opacity: 1 },
        ]}
        curveTopHeight={210}
        curveBottomHeight={100}
        maxHeight={504}
        data={[
          // photoshop zoom 300%
          { x: 0, y1: 155, y2: 12 },
          { x: 100, y1: 160, y2: 17 },
          { x: 200, y1: 150, y2: 18 },
          { x: 300, y1: 140, y2: 25 },
          { x: 400, y1: 130, y2: 30 },
          { x: 500, y1: 110, y2: 30 },
          { x: 600, y1: 90, y2: 30 },
          { x: 700, y1: 70, y2: 30 },
          { x: 800, y1: 67, y2: 35 },
          { x: 900, y1: 61, y2: 44 },
          { x: 1000, y1: 59, y2: 56 },
          { x: 1100, y1: 58, y2: 66 },
          { x: 1200, y1: 56, y2: 73 },
          { x: 1300, y1: 53, y2: 78 },
          { x: 1400, y1: 47, y2: 81 },
          { x: 1500, y1: 35, y2: 80 },
        ]}
      />
    </>
  );
};