name: "next:no-img-element"

query: |
  query {
    File {
      ast_node {
        ... on JSXElementAST {
          opening_element {
            name @filter(op: "=", value: ["$img"])
            attribute_count @filter(op: ">", value: ["$zero"])
          }
          span_: span {
            start @output
            end @output
          }

          parent @fold @transform(op: "count") @filter(op: "=", value: ["$zero"]) {
            ... on JSXElementAST {
              opening_element {
                name @filter(op: "=", value: ["$picture"])
              }
            }
          }
        }
      }
    }
  }

args:
  img: "img"
  picture: "picture"
  zero: 0

summary: "Prefer <Image /> from `next/image` over <img>"
reason: "Use `next/image` to improve performance with automatic Image Optimization."

tests:
  pass:
    - relative_path:
        - "index.tsx"
      code: |
        import { Image } from 'next/image';

        export class MyComponent {
          render() {
            return (
              <div>
                <Image
                  src="/test.png"
                  alt="Test picture"
                  width={500}
                  height={500}
                />
              </div>
            );
          }
        };
    - relative_path:
        - "index.tsx"
      code: |
        export class MyComponent {
          render() {
            return (
              <picture>
                <img
                  src="/test.png"
                  alt="Test picture"
                  width={500}
                  height={500}
                />
              </picture>
            );
          }
        }
    - relative_path:
        - "index.tsx"
      code: |
        export class MyComponent {
          render() {
            return (
              <div>
                <picture>
                  <source media="(min-width:650px)" srcset="/test.jpg"/>
                  <img
                    src="/test.png"
                    alt="Test picture"
                    style="width:auto;"
                  />
                </picture>
              </div>
            );
          }
        }
  fail:
    - relative_path:
        - "index.tsx"
      code: |
        export class MyComponent {
          render() {
            return (
              <div>
                <img
                  src="/test.png"
                  alt="Test picture"
                  width={500}
                  height={500}
                />
              </div>
            );
          }
        }
    - relative_path:
        - "index.tsx"
      code: |
        export class MyComponent {
          render() {
            return (
              <img
                src="/test.png"
                alt="Test picture"
                width={500}
                height={500}
              />
            );
          }
        }
