import React from 'react';
import {Line, Svg} from 'react-native-svg';

function LineExample() {
  return (
    <Svg height="100" width="100">
      <Line x1="10%" y1="10%" x2="90%" y2="90%" stroke="red" strokeWidth="2" />
    </Svg>
  );
}
LineExample.title = 'Line';

function LineWithStrokeLinecap() {
  return (
    <Svg height="100" width="200">
      <Line
        x1="40"
        y1="10"
        x2="160"
        y2="10"
        stroke="red"
        strokeWidth="10"
        strokeLinecap="round"
      />
      <Line
        x1="40"
        y1="40"
        x2="160"
        y2="40"
        stroke="red"
        strokeWidth="10"
        strokeLinecap="butt"
      />
      <Line
        x1="40"
        y1="80"
        x2="160"
        y2="80"
        stroke="red"
        strokeWidth="10"
        strokeLinecap="square"
      />
    </Svg>
  );
}
LineWithStrokeLinecap.title = 'Line';

const icon = (
  <Svg height="30" width="30" viewBox="0 0 20 20">
    <Line x1="0" y1="0" x2="20" y2="20" stroke="red" strokeWidth="1" />
  </Svg>
);
const samples = [LineExample, LineWithStrokeLinecap];

export {icon, samples};
