import { iconVariants } from "./variants"

import type { IconProps } from "@/types/components/icon"

export default function FamilyIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      fill="none"
      height="20"
      viewBox="0 0 20 20"
      width="20"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="#1C1B1F"
        d="M17.58 6.439c-.51 0-.947-.181-1.31-.545a1.785 1.785 0 0 1-.544-1.309c0-.51.181-.946.544-1.309.363-.363.8-.544 1.31-.544.509 0 .945.181 1.308.544.363.363.545.8.545 1.31s-.182.945-.545 1.308c-.363.364-.799.545-1.309.545Zm-.928 14.83v-7.415c0-.618-.158-1.174-.475-1.669a3.422 3.422 0 0 0-1.216-1.158l.811-2.387c.123-.386.351-.695.684-.927a1.917 1.917 0 0 1 1.123-.347c.417 0 .792.116 1.124.347.332.232.56.541.684.927l2.363 7.067h-2.317v5.561h-2.78Zm-4.17-9.732a1.34 1.34 0 0 1-.985-.406 1.34 1.34 0 0 1-.405-.985c0-.386.135-.714.405-.984s.598-.406.985-.406c.386 0 .714.135.985.406.27.27.405.598.405.984s-.135.715-.405.985-.6.406-.985.406ZM5.994 6.439c-.51 0-.946-.181-1.31-.545a1.785 1.785 0 0 1-.544-1.309c0-.51.182-.946.545-1.309.363-.363.8-.544 1.309-.544.51 0 .946.181 1.309.544.363.363.545.8.545 1.31s-.182.945-.545 1.308c-.363.364-.8.545-1.31.545ZM4.14 21.269V14.78H2.75V9.218c0-.51.182-.946.545-1.309.363-.363.799-.544 1.309-.544h2.78c.51 0 .946.181 1.31.544.362.363.544.8.544 1.31v5.56h-1.39v6.488H4.14Zm6.952 0V17.56h-.927v-3.707c0-.386.135-.715.405-.985s.599-.406.985-.406h1.854c.386 0 .714.136.984.406s.406.598.406.985v3.707h-.927v3.707h-2.78Z"
      />
    </svg>
  )
}
