import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { Shape } from '../../../common/components/shape';
import { theme } from '../../../app/theme';

type TProps = {};

export const Wave: React.FC<TProps> = () => {
  return (
    <SBox height={730} position="absolute" top={-4}>
      <Shape
        gradient={[
          { offset: 0, color: theme.colors.mirage, opacity: 1 },
          { offset: 1, color: theme.colorsRgba.trackWave, opacity: 0 },
        ]}
        curveTopHeight={71}
        maxHeight={330}
        data={[
          // photoshop zoom 300%
          { x: 0, y1: 170 },
          { x: 50, y1: 182 },
          { x: 100, y1: 194 },
          { x: 200, y1: 214 },
          { x: 300, y1: 222 },
          { x: 400, y1: 220 },
          { x: 500, y1: 208 },
          { x: 600, y1: 192 },
          { x: 700, y1: 178 },
          { x: 800, y1: 164 },
          { x: 900, y1: 152 },
          { x: 1000, y1: 142 },
          { x: 1100, y1: 140 },
          { x: 1200, y1: 148 },
          { x: 1300, y1: 162 },
          { x: 1350, y1: 174 },
          { x: 1400, y1: 187 },
          { x: 1450, y1: 210 },
          { x: 1480, y1: 228 },
          { x: 1500, y1: 242 },
        ]}
        name="wave-playlistst"
      />
    </SBox>
  );
};