import { Icon, IconProps } from "@mezo-org/mezo-clay"
import React, { forwardRef, Ref } from "react"

function EditIcon(props: IconProps, ref: Ref<SVGSVGElement>) {
  const { title, size = 16, color = "black", ...restProps } = props

  return (
    <Icon
      ref={ref}
      viewBox="0 0 24 24"
      title={title ?? "Edit"}
      size={size}
      color={color}
      role="graphics-symbol"
      {...restProps}
    >
      <path
        d="M18 10L21 7L17 3L14 6M18 10L8 20H4V16L14 6M18 10L14 6"
        stroke={color}
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      />
    </Icon>
  )
}

const ForwardedEditIcon: React.ForwardRefExoticComponent<
  IconProps & React.RefAttributes<SVGSVGElement>
> = forwardRef<SVGSVGElement, IconProps>(EditIcon)

export default ForwardedEditIcon