import * as React from "react";

export const CheckboxIcon = React.forwardRef<
  SVGSVGElement,
  React.ComponentPropsWithoutRef<"svg">
>(function Checkbox(props, ref) {
  return (
    <svg
      ref={ref}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="16"
      height="16"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="M20 6 9 17l-5-5" />
    </svg>
  );
});

export const IndeterminateIcon = React.forwardRef<
  SVGSVGElement,
  React.ComponentPropsWithoutRef<"svg">
>(function Indeterminate(props, ref) {
  return (
    <svg
      ref={ref}
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 -960 960 960"
      fill="currentColor"
      {...props}
    >
      <path d="M240-440v-80h480v80H240z"></path>
    </svg>
  );
});

export const SortIcon = React.forwardRef<
  SVGSVGElement,
  React.ComponentPropsWithoutRef<"svg"> & { direction: "asc" | "desc" | "none" }
>(function Indeterminate({ className, direction = "none", ...props }, ref) {
  return (
    <svg
      ref={ref}
      data-direction={direction}
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 -960 960 960"
      {...props}
    >
      <path
        className="_asc"
        d="M600-80L400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80z"
      ></path>
      <path
        className="_desc"
        d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80z"
      ></path>
    </svg>
  );
});