import type { ComponentPropsWithoutRef, ReactNode } from "react";

import { cn } from "./cn";

type IconProps = ComponentPropsWithoutRef<"svg">;

function IconFrame({
  children,
  className,
  viewBox = "0 0 16 16",
  ...props
}: IconProps & {
  children: ReactNode;
  viewBox?: string;
}) {
  return (
    <svg
      aria-hidden="true"
      className={cn("size-4 shrink-0", className)}
      fill="none"
      viewBox={viewBox}
      {...props}
    >
      {children}
    </svg>
  );
}

export function CheckIcon({ className, ...props }: IconProps) {
  return (
    <IconFrame className={className} {...props}>
      <path
        d="M3.5 8.5 6.5 11.5 12.5 5.5"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.75"
      />
    </IconFrame>
  );
}

export function ChevronDownIcon({ className, ...props }: IconProps) {
  return (
    <IconFrame className={className} {...props}>
      <path
        d="m4.5 6.5 3.5 3 3.5-3"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.75"
      />
    </IconFrame>
  );
}

export function ChevronRightIcon({ className, ...props }: IconProps) {
  return (
    <IconFrame className={className} {...props}>
      <path
        d="m6 4.5 3.5 3.5L6 11.5"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.75"
      />
    </IconFrame>
  );
}

export function CloseIcon({ className, ...props }: IconProps) {
  return (
    <IconFrame className={className} {...props}>
      <path
        d="m4.5 4.5 7 7m0-7-7 7"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.75"
      />
    </IconFrame>
  );
}

export function DotIcon({ className, ...props }: IconProps) {
  return (
    <IconFrame className={className} viewBox="0 0 8 8" {...props}>
      <circle cx="4" cy="4" fill="currentColor" r="2.25" />
    </IconFrame>
  );
}

export function SortAscendingIcon({ className, ...props }: IconProps) {
  return (
    <IconFrame className={className} {...props}>
      <path
        d="M8 12.5v-9m0 0L5.5 6m2.5-2.5L10.5 6"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
      />
    </IconFrame>
  );
}

export function SortDescendingIcon({ className, ...props }: IconProps) {
  return (
    <IconFrame className={className} {...props}>
      <path
        d="M8 3.5v9m0 0-2.5-2.5M8 12.5l2.5-2.5"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
      />
    </IconFrame>
  );
}

export function SortUnsortedIcon({ className, ...props }: IconProps) {
  return (
    <IconFrame className={className} {...props}>
      <path
        d="m5 6 3-3 3 3M11 10l-3 3-3-3"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
      />
    </IconFrame>
  );
}

export function SpinnerIcon({ className, ...props }: IconProps) {
  return (
    <IconFrame className={className} {...props}>
      <circle
        cx="8"
        cy="8"
        opacity="0.22"
        r="5.25"
        stroke="currentColor"
        strokeWidth="1.75"
      />
      <path
        d="M8 2.75A5.25 5.25 0 0 1 13.25 8"
        stroke="currentColor"
        strokeLinecap="round"
        strokeWidth="1.75"
      />
    </IconFrame>
  );
}