import type { ComponentPropsWithoutRef, FC } from 'react'
import { useId } from 'react'

type Props = ComponentPropsWithoutRef<'svg'>

export const LinkedInLogo: FC<Props> = (props) => {
  const clipId = useId()

  return (
    <svg
      role="img"
      aria-label="LinkedIn"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      {...props}
    >
      <g clipPath={`url(#${clipId})`}>
        <path
          d="M16 1.17689V14.8231C16 15.1352 15.876 15.4346 15.6553 15.6553C15.4346 15.876 15.1352 16 14.8231 16H1.17689C0.864758 16 0.565412 15.876 0.344703 15.6553C0.123993 15.4346 0 15.1352 0 14.8231V1.17689C0 0.864758 0.123993 0.565412 0.344703 0.344703C0.565412 0.123993 0.864758 0 1.17689 0H14.8231C15.1352 0 15.4346 0.123993 15.6553 0.344703C15.876 0.565412 16 0.864758 16 1.17689ZM4.70667 6.12089H2.35378V13.6569H4.69689V6.12089H4.70667ZM4.90311 3.53067C4.90463 3.35301 4.87111 3.1768 4.80444 3.01212C4.73778 2.84744 4.6393 2.69752 4.51462 2.57095C4.38995 2.44438 4.24154 2.34364 4.07789 2.27449C3.91423 2.20535 3.73855 2.16916 3.56089 2.168H3.52C3.1586 2.168 2.812 2.31157 2.55645 2.56712C2.3009 2.82267 2.15733 3.16927 2.15733 3.53067C2.15733 3.89207 2.3009 4.23867 2.55645 4.49422C2.812 4.74977 3.1586 4.89333 3.52 4.89333C3.69766 4.89758 3.87442 4.86674 4.04014 4.80258C4.20587 4.73841 4.35731 4.64218 4.48579 4.5194C4.61427 4.39662 4.71726 4.2497 4.78887 4.08705C4.86048 3.9244 4.8993 3.74923 4.90311 3.57156V3.53067ZM13.6364 9.07378C13.6364 6.80267 12.1911 5.92533 10.7662 5.92533C10.2988 5.90387 9.8339 6.00496 9.41759 6.21857C9.00128 6.43218 8.64804 6.75089 8.39289 7.14311H8.32V6.11111H6.11111V13.6462H8.46489V9.65156C8.43048 9.24285 8.55851 8.83705 8.82123 8.52208C9.08395 8.20712 9.4602 8.00836 9.86844 7.96889H9.96089C10.7049 7.96889 11.2622 8.43378 11.2622 9.62044V13.656H13.6151L13.6364 9.08356V9.07378Z"
          fill="currentColor"
        />
      </g>
      <defs>
        <clipPath id={clipId}>
          <rect width="16" height="16" fill="currentColor" />
        </clipPath>
      </defs>
    </svg>
  )
}
