import React from 'react';
import { G, Path, Defs, LinearGradient, Stop } from 'react-native-svg';
import { theme } from '../../app/theme';

type TProps = {
  color?: string;
  path?: string;
  id: string;
};

export const Area: React.FC<TProps> = props => {
  const { color, path, id } = props;

  return (
    <G>
      <Defs>
        <LinearGradient id={id} x1="0" y1="100%" x2="0" y2="0">
          <Stop offset="100%" stopColor={color} stopOpacity={0.8} />
          <Stop offset="0%" stopColor={color} stopOpacity={0.1} />
        </LinearGradient>
      </Defs>

      <G>
        <Path
          d={path}
          fill={`url(#${id})`}
          // @ts-ignore
          strokeAreajoin="round"
          strokeAreacap="round"
          // strokeWidth={1.5}
          opacity={0.75}
        />

        {/*<Path*/}
        {/*  d={path}*/}
        {/*  fill="none"*/}
        {/*  stroke={color}*/}
        {/*  strokeAreajoin="round"*/}
        {/*  strokeAreacap="round"*/}
        {/*  strokeWidth={2}*/}
        {/*/>*/}
      </G>
    </G>
  );
};

Area.defaultProps = {
  color: theme.colors.pastelGreen,
};