import React from "react";
import Image from "next/image";

const Appetizers = () => {
  return (
    <div className="flex flex-col">
      <div className="text-2xl">
        <h2>Nachos</h2>
        <div className="decor" aria-hidden="true">
          <div className="left"></div>
          <Image
            src="/gun01.svg"
            alt="gun icon for decor"
            className=""
            width="61"
            height="101"
          />
          <div className="right"></div>
        </div>
      </div>
      <ul className="text-xl flex flex-col">
        <li className="item">
          <div className="head">
            <h4>Shredded</h4>
            <span>- $10</span>
          </div>
          <p>Chicken or beef with creamy white queso sauce.</p>
        </li>
        <li className="item">
          <div className="head">
            <h4>Fajita Nachos</h4>
            <span>- $11</span>
          </div>
          <p>
            Grilled steak or chicken with onions, tomatoes, and bell peppers.
          </p>
        </li>
        <li className="item">
          <div className="head">
            <h4>Carnita Nachos</h4>
            <span>- $12</span>
          </div>
          <p>
            Crispy tortilla chips topped with beans, creamy white queso sauce,
            carnitas, lettuce, Pico de Gallo and sour cream.
          </p>
        </li>
        <li className="item">
          <div className="head">
            <h4>Nachos Supreme</h4>
            <span>- $12</span>
          </div>
          <p>
            Crispy tortilla chips topped with beans, creamy white queso sauce,
            your choice of beef or chicken, lettuce, Pico de Gallo, guacamole,
            and sour cream.
          </p>
        </li>
      </ul>
    </div>
  );
};

export default Appetizers;