import React from "react";
import Image from "next/image";
import "./appetizers.css";

const Appetizers = () => {
  return (
    <div className="flex flex-col">
      <div className="text-4xl flex flex-row text-black antialiased font-bold font-sans items-center justify-center">
        <Image
          src="/gun01.svg"
          alt="gun icon for decor"
          className="rotate-45"
          width={70}
          height={50}
        />
        <div className="">Appetizers</div>
        <Image
          src="/gun01.svg"
          alt="gun icon for decor"
          className="gun_menu gun_rotate"
          width={70}
          height={50}
        />
      </div>
      <div>
        <div className="p-6">
          <h4>
            Guacamole Dip <span>$7 - Large, $5 - small</span>
          </h4>
          <p>
            Made fresh daily. Avocado, Pico de Gallo, Seasoning, with fresh lime
            juice.
          </p>
        </div>
        <div>
          <h4>
            Chiles Toreados <span>$5</span>
            <Image
              src="/red-chili-pepper.svg"
              alt="gun icon for decor"
              className="rotate-45"
              width={70}
              height={50}
            />
          </h4>
        </div>
      </div>
    </div>
  );
};

export default Appetizers;