"use client";

import React from "react";
import type { CSSProperties } from "react";

import { useIconSize } from "../contexts/IconSizeContext";

type Props = {
  size?: number;
  color?: string;
  style?: CSSProperties;
};

export default function UserSettings({
  color = "currentcolor",
  size,
  ...props
}: Props) {
  const iconSize = useIconSize();
  const height = size || iconSize.size;
  const width = size || iconSize.size;
  const style = { color, ...props.style };
  return (
    <svg
      {...props}
      data-testid="geist-icon"
      height={height}
      strokeLinejoin="round"
      style={style}
      viewBox="0 0 16 16"
      width={width}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M2.5 3.25C2.5 1.45507 3.95507 0 5.75 0H6.25C8.04493 0 9.5 1.45507 9.5 3.25V3.75C9.5 5.54493 8.04493 7 6.25 7H5.75C3.95507 7 2.5 5.54493 2.5 3.75V3.25ZM5.75 1.5C4.7835 1.5 4 2.2835 4 3.25V3.75C4 4.7165 4.7835 5.5 5.75 5.5H6.25C7.2165 5.5 8 4.7165 8 3.75V3.25C8 2.2835 7.2165 1.5 6.25 1.5H5.75ZM1.5 13.1694C2.32482 11.4909 3.71318 10.5 5.5 10.5V9C2.97349 9 1.0827 10.4894 0.0690305 12.6857L0 12.8353V13V15.25V16H0.75H5.5V14.5H1.5V13.1694ZM10.0915 10.2175C10.4564 10.0309 10.7944 9.70265 10.9642 9.25H11.0358C11.2056 9.70265 11.5436 10.0309 11.9085 10.2175C11.9698 10.2488 12.0294 10.2833 12.0871 10.3208C12.4317 10.5446 12.886 10.6736 13.3637 10.5941L13.3994 10.6559C13.0923 11.0289 12.9765 11.4857 12.9973 11.8955C12.9991 11.93 13 11.9649 13 12C13 12.0351 12.9991 12.07 12.9973 12.1044C12.9765 12.5143 13.0923 12.9711 13.3994 13.3441L13.3637 13.4059C12.886 13.3264 12.4317 13.4554 12.0871 13.6792C12.0294 13.7167 11.9698 13.7512 11.9085 13.7825C11.5436 13.9691 11.2056 14.2973 11.0358 14.75H10.9642C10.7944 14.2973 10.4564 13.9691 10.0915 13.7825C10.0302 13.7512 9.97058 13.7167 9.91294 13.6792C9.56829 13.4554 9.11402 13.3264 8.63627 13.4059L8.60059 13.3441C8.90769 12.9711 9.02353 12.5144 9.00265 12.1045C9.00089 12.07 9 12.0351 9 12C9 11.9649 9.00089 11.93 9.00265 11.8955C9.02353 11.4856 8.9077 11.0289 8.60061 10.6559L8.63629 10.5941C9.11403 10.6736 9.56829 10.5446 9.91295 10.3208C9.97059 10.2833 10.0302 10.2488 10.0915 10.2175ZM14.4037 11.4079L14.9641 10.866L13.9641 9.13398L13.215 9.34827C13.0629 9.39177 12.9006 9.35863 12.7679 9.27247C12.6743 9.21169 12.5774 9.15559 12.4775 9.1045C12.3369 9.03257 12.2272 8.90865 12.1888 8.75537L12 8H10L9.81116 8.75537C9.77284 8.90865 9.66315 9.03257 9.52247 9.1045C9.42257 9.15558 9.32566 9.21168 9.23208 9.27247C9.09943 9.35862 8.93709 9.39176 8.78502 9.34826L8.03591 9.13397L7.03591 10.866L7.5963 11.4079C7.70977 11.5176 7.7623 11.6743 7.75427 11.8319C7.75143 11.8876 7.75 11.9436 7.75 12C7.75 12.0564 7.75143 12.1124 7.75427 12.168C7.7623 12.3257 7.70977 12.4824 7.5963 12.5921L7.03589 13.134L8.03589 14.866L8.78501 14.6517C8.93708 14.6082 9.09942 14.6414 9.23207 14.7275C9.32566 14.7883 9.42257 14.8444 9.52248 14.8955C9.66315 14.9674 9.77284 15.0913 9.81116 15.2446L10 16H12L12.1888 15.2446C12.2272 15.0913 12.3369 14.9674 12.4775 14.8955C12.5774 14.8444 12.6743 14.7883 12.7679 14.7275C12.9006 14.6414 13.0629 14.6082 13.215 14.6517L13.9641 14.866L14.9641 13.134L14.4037 12.5921C14.2902 12.4824 14.2377 12.3257 14.2457 12.168C14.2486 12.1124 14.25 12.0564 14.25 12C14.25 11.9436 14.2486 11.8876 14.2457 11.832C14.2377 11.6743 14.2902 11.5176 14.4037 11.4079Z"
        fill="currentColor"
      />
    </svg>
  );
}
