"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 LogoTwitter({
  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
        d="M5.03168 15C11.0694 15 14.3718 9.61332 14.3718 4.94201C14.3718 4.78901 14.3718 4.6367 14.3622 4.48508C15.0047 3.98467 15.5593 3.36507 16 2.65529C15.4009 2.94116 14.7653 3.12864 14.1146 3.21146C14.7998 2.76968 15.3127 2.07484 15.5578 1.25624C14.9134 1.668 14.2084 1.95819 13.4733 2.11428C12.9783 1.54755 12.3237 1.17227 11.6108 1.04653C10.8978 0.920784 10.1663 1.05158 9.52931 1.41867C8.89234 1.78576 8.38548 2.36868 8.08716 3.07723C7.78884 3.78579 7.71569 4.58046 7.87904 5.33829C6.57392 5.26784 5.29715 4.90261 4.13161 4.26632C2.96607 3.63004 1.93782 2.73692 1.1136 1.64494C0.693819 2.42314 0.565248 3.34438 0.754066 4.22108C0.942885 5.09778 1.43489 5.86402 2.12992 6.3638C1.60751 6.34713 1.0965 6.19537 0.64 5.92134C0.64 5.93582 0.64 5.95098 0.64 5.96614C0.640207 6.78229 0.902567 7.57324 1.38258 8.20483C1.86259 8.83642 2.53071 9.26976 3.2736 9.43137C2.79032 9.5733 2.28325 9.59405 1.79136 9.49202C2.00113 10.1944 2.40951 10.8087 2.95941 11.2488C3.5093 11.689 4.17319 11.933 4.85824 11.9469C3.69583 12.9307 2.25988 13.4647 0.78144 13.4631C0.520258 13.4626 0.259331 13.4455 0 13.4121C1.50121 14.4495 3.24794 14.9998 5.03168 14.9972"
        fill="#449AEA"
      />
    </svg>
  );
}
