import React, { FC } from "react";
import { BaseIconProps } from "./index";
import clsx from "clsx";
interface Props extends BaseIconProps {
  active?: boolean;
}
export const PulldownIcon: FC<Props> = props => {
  const { active } = props;

  return (
    <svg
      width="7px"
      height="4px"
      viewBox="0 0 7 4"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      className={clsx("cursor-pointer ", active ? "text-ntsSvg-200" : "text-ntsSvg", props.className)}
      style={{
        transform: `rotate(${active ? 180 : 0}deg)`,
        transition: "transform 0.2s"
      }}
      //   xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <title>58DCE9B7-9744-4778-BF6A-3E51B24E75AB</title>
      <g id="双向持仓-开仓1.0" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <g transform="translate(-1009.000000, -100.000000)" fill="currentColor" fillRule="nonzero" id="编组">
          <g transform="translate(780.000000, 34.000000)">
            <g id="下单" transform="translate(0.000000, 46.000000)">
              <g id="选择杠杆倍数" transform="translate(16.000000, 10.000000)">
                <g id="下拉箭头" transform="translate(213.000000, 10.000000)">
                  <path
                    d="M5.5,2 C5.5,1.91945063 5.48471824,1.84539718 5.45415473,1.77783964 C5.42359121,1.71028211 5.37774594,1.64532294 5.31661891,1.58296214 L2.37870105,-1.3518931 C2.27936963,-1.45063103 2.15838905,-1.5 2.01575931,-1.5 C1.92406877,-1.5 1.83874562,-1.4766147 1.75978988,-1.4298441 C1.68083413,-1.3830735 1.61779688,-1.3200631 1.57067813,-1.24081292 C1.52355938,-1.16156273 1.5,-1.07386785 1.5,-0.977728285 C1.5,-0.832219748 1.55348615,-0.704899777 1.66045845,-0.595768374 L4.27745941,2 L1.66045845,4.59576837 C1.55348615,4.70749814 1.5,4.83481811 1.5,4.97772829 C1.5,5.07646622 1.52355938,5.16481069 1.57067813,5.24276169 C1.61779688,5.32071269 1.68083413,5.3830735 1.75978988,5.4298441 C1.83874562,5.4766147 1.92406877,5.5 2.01575931,5.5 C2.15838905,5.5 2.27936963,5.45063103 2.37870105,5.3518931 L5.31661891,2.41703786 C5.3802929,2.35467706 5.42677491,2.2890683 5.45606495,2.22021158 C5.48535498,2.15135486 5.5,2.077951 5.5,2 Z"
                    transform="translate(3.500000, 2.000000) rotate(-270.000000) translate(-3.500000, -2.000000) "
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
  );
};
