import React from 'react';
import { Shape } from '../../common/components/shape';
import { theme } from '../../app/theme';
import { SWaveHolder } from '../s-components/s-wave-holder';

type TProps = {
  topPosition: number;
};

export const Wave: React.FC<TProps> = props => {
  const { topPosition } = props;
  return (
    <SWaveHolder pt={topPosition}>
      <Shape
        name="dark-wave"
        gradient={[
          { offset: 0, color: theme.colors.mirage, opacity: 0 },
          { offset: 1, color: theme.colorsRgba.trackWave, opacity: 1 },
        ]}
        curveTopHeight={0}
        curveBottomHeight={64} //171
        maxHeight={328}
        data={[
          // photoshop zoom 300%
          { x: 0, y1: 265, y2: 100 },
          { x: 50, y1: 308, y2: 145 },
          { x: 100, y1: 319, y2: 190 },
          { x: 150, y1: 314, y2: 224 },
          { x: 200, y1: 297, y2: 251 },
          { x: 250, y1: 220, y2: 269 },
          { x: 300, y1: 230, y2: 283 },
          { x: 350, y1: 235, y2: 291 },
          { x: 400, y1: 240, y2: 295 },
          { x: 450, y1: 250, y2: 293 },
          { x: 500, y1: 255, y2: 287 },
          { x: 550, y1: 255, y2: 275 },
          { x: 600, y1: 255, y2: 259 },
          { x: 650, y1: 255, y2: 240 },
          { x: 700, y1: 104, y2: 218 },
          { x: 750, y1: 274, y2: 195 },
          { x: 800, y1: 431, y2: 173 },
          { x: 850, y1: 517, y2: 155 },
          { x: 900, y1: 551, y2: 143 },
          { x: 950, y1: 550, y2: 134 },
          { x: 1000, y1: 503, y2: 127 },
          { x: 1050, y1: 382, y2: 124 },
          { x: 1100, y1: 382, y2: 123 },
          { x: 1150, y1: 382, y2: 126 },
          { x: 1200, y1: 382, y2: 133 },
          { x: 1250, y1: 382, y2: 145 },
          { x: 1300, y1: 382, y2: 160 },
          { x: 1350, y1: 382, y2: 178 },
          { x: 1400, y1: 382, y2: 203 },
          { x: 1450, y1: 382, y2: 230 },
          { x: 1500, y1: 382, y2: 255 },
        ]}
      />
    </SWaveHolder>
  );
};