// components/shared/SpecificationsLayout.jsx

import Link from 'next/link';

const SpecificationsLayout = ({ 
  title = "Service Specifications",
  specificationItems = [],
  backgroundColor = "#e8f5f3",
  iconBackgroundColor = "bg-orange-100"
}) => {
  return (
    <section className="w-full min-w-0 py-6 lg:py-8">
      <div className="w-full max-w-none px-4 sm:px-6 lg:px-6">
        {/* Section Header */}
        <div className="text-left mb-6 lg:mb-8">
          <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
            {title}
          </h2>
        </div>

        {/* Specifications Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 w-full max-w-none">
          {specificationItems.map((spec, index) => (
            <div 
              key={index}
              className="w-full min-w-0"
            >
              {/* Background Card */}
              <div 
                className="rounded-3xl p-6 lg:p-8 h-full min-h-[240px] sm:min-h-[280px] flex flex-col"
                style={{ backgroundColor: backgroundColor }}
              >
                {/* Icon Circle */}
                <div className="flex justify-center mb-4 lg:mb-6">
                  <div className={`w-12 h-12 sm:w-16 sm:h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}>
                    <img 
                      src={spec.icon} 
                      className="w-8 h-8 sm:w-10 sm:h-10 object-contain" 
                      alt={`${spec.title} Icon`}
                    />
                  </div>
                </div>
                
                {/* Title */}
                <h3 className="text-center text-teal-700 text-base sm:text-lg font-semibold mb-3 lg:mb-4">
                  {spec.title}
                </h3>
                
                {/* Content */}
                <div className="text-gray-700 text-xs sm:text-sm leading-relaxed text-center flex-grow flex items-start justify-center">
                  <div className="w-full min-w-0">
                    {spec.renderContent ? spec.renderContent() : (
                      <div className="text-gray-600 break-words">
                        {spec.content}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default SpecificationsLayout;