// components/shared/ApplicationsLayout.jsx

const ApplicationsLayout = ({ 
  title = "Applications",
  applicationItems = [],
  backgroundColor = "bg-teal-50",
  titleColor = "text-gray-700"
}) => {
  return (
    <section className={`py-5 lg:py-5 ${backgroundColor}`}>
      <div className="container-fluid px-4 lg:px-6">
        <h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
          {title}
        </h2>
        
        <ul className="space-y-4 text-gray-600 leading-relaxed lg:px-6">
          {applicationItems.map((item, index) => (
            <li key={index} className="flex items-start">
              <span 
                className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
                style={{backgroundColor: '#faae31'}}
              ></span>
              <span className="text-base">{item}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export default ApplicationsLayout;