import { useIcon } from 'hooks';
import React from 'react';
import Svg, { Path } from 'react-native-svg';
import { IconProps } from '../types';

export const UnderLine: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();

  return (
    <Svg width="12" height="12" viewBox="0 0 12 12" fill="none" {...props}>
      <Path
        d="M1.3125 0.9375C1.57097 0.9375 1.78125 1.14778 1.78125 1.40625V6.09375C1.78125 8.41997 3.67378 10.3125 6 10.3125C8.32622 10.3125 10.2188 8.41997 10.2188 6.09375V1.40625C10.2188 1.14778 10.429 0.9375 10.6875 0.9375C10.9464 0.9375 11.1562 0.727641 11.1562 0.46875C11.1562 0.209859 10.9464 0 10.6875 0H6.9375C6.67861 0 6.46875 0.209859 6.46875 0.46875C6.46875 0.727641 6.67861 0.9375 6.9375 0.9375C7.19597 0.9375 7.40625 1.14778 7.40625 1.40625V6.09375C7.40625 6.86916 6.77541 7.5 6 7.5C5.22459 7.5 4.59375 6.86916 4.59375 6.09375V1.40625C4.59375 1.14778 4.80403 0.9375 5.0625 0.9375C5.32139 0.9375 5.53125 0.727641 5.53125 0.46875C5.53125 0.209859 5.32139 0 5.0625 0H1.3125C1.05361 0 0.84375 0.209859 0.84375 0.46875C0.84375 0.727641 1.05361 0.9375 1.3125 0.9375ZM6 8.4375C7.29234 8.4375 8.34375 7.38609 8.34375 6.09375V1.40625C8.34375 1.24193 8.31516 1.08422 8.26312 0.9375H9.3619C9.30987 1.08422 9.28127 1.24193 9.28127 1.40625V6.09375C9.28127 7.90303 7.8093 9.375 6.00002 9.375C4.19074 9.375 2.71877 7.90303 2.71877 6.09375V1.40625C2.71877 1.24193 2.69018 1.08422 2.63815 0.9375H3.73692C3.68489 1.08422 3.6563 1.24193 3.6563 1.40625V6.09375C3.65625 7.38609 4.70766 8.4375 6 8.4375Z"
        fill={getIconColor(colorVariant)}
      />
      <Path
        d="M10.6875 11.0625H1.3125C1.05361 11.0625 0.84375 11.2724 0.84375 11.5312C0.84375 11.7901 1.05361 12 1.3125 12H10.6875C10.9464 12 11.1562 11.7901 11.1562 11.5312C11.1562 11.2724 10.9464 11.0625 10.6875 11.0625Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
