import { type SVGProps } from "react";
import { cn } from "@/lib/utils";

type Direction = "ltr" | "rtl";
type IconDirProps = SVGProps<SVGSVGElement> & {
  dir: Direction;
};

export function IconDir({ dir, className, ...props }: IconDirProps) {
  return (
    <svg
      data-name={`icon-dir-${dir}`}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 79.86 51.14"
      className={cn(dir === "rtl" && "rotate-y-180", className)}
      {...props}
    >
      <path
        d="M23.42.51h51.92c2.21 0 4 1.79 4 4v42.18c0 2.21-1.79 4-4 4H23.42s-.04-.02-.04-.04V.55s.02-.04.04-.04z"
        opacity={0.15}
      />
      <path
        fill="none"
        opacity={0.72}
        strokeLinecap="round"
        strokeMiterlimit={10}
        strokeWidth="2px"
        d="M5.56 14.88L17.78 14.88"
      />
      <path
        fill="none"
        opacity={0.48}
        strokeLinecap="round"
        strokeMiterlimit={10}
        strokeWidth="2px"
        d="M5.56 22.09L16.08 22.09"
      />
      <path
        fill="none"
        opacity={0.55}
        strokeLinecap="round"
        strokeMiterlimit={10}
        strokeWidth="2px"
        d="M5.56 18.38L14.93 18.38"
      />
      <g strokeLinecap="round" strokeMiterlimit={10}>
        <circle cx={7.51} cy={7.4} r={2.54} opacity={0.8} />
        <path
          fill="none"
          opacity={0.8}
          strokeWidth="2px"
          d="M12.06 6.14L17.78 6.14"
        />
        <path fill="none" opacity={0.6} d="M11.85 8.79L16.91 8.79" />
      </g>
      <path
        fill="none"
        opacity={0.62}
        strokeLinecap="round"
        strokeMiterlimit={10}
        strokeWidth="3px"
        d="M29.41 7.4L34.67 7.4"
      />
      <rect
        x={28.76}
        y={11.21}
        width={26.03}
        height={2.73}
        rx={0.64}
        ry={0.64}
        opacity={0.44}
        strokeLinecap="round"
        strokeMiterlimit={10}
      />
      <rect
        x={28.76}
        y={17.01}
        width={44.25}
        height={13.48}
        rx={0.64}
        ry={0.64}
        opacity={0.3}
        strokeLinecap="round"
        strokeMiterlimit={10}
      />
      <rect
        x={28.76}
        y={33.57}
        width={44.25}
        height={4.67}
        rx={0.64}
        ry={0.64}
        opacity={0.21}
        strokeLinecap="round"
        strokeMiterlimit={10}
      />
      <rect
        x={28.76}
        y={41.32}
        width={36.21}
        height={4.67}
        rx={0.64}
        ry={0.64}
        opacity={0.3}
        strokeLinecap="round"
        strokeMiterlimit={10}
      />
    </svg>
  );
}
