import Image from "next/image";

interface FeatureItem {
  name: string;
  icon: any;
}

interface WarrantyItem {
  name: string;
  icon: any;
  period: string;
}

interface FeaturesWarrantiesProps {
  features: FeatureItem[];
  warranties: WarrantyItem[];
}

const FeaturesWarranties: React.FC<FeaturesWarrantiesProps> = ({ features, warranties }) => {
  return (
    <div className="flex flex-col md:flex-row gap-2">
      {/* FEATURES SECTION - Always show */}
      <div className="flex-1 bg-[#F1F5F9] p-3 rounded-md">
        <h3 className="text-[#052531] font-bold text-md">المميزات</h3>
        <hr className="my-2 border-[#CAD5E2]" />

        {features.length > 0 ? (
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            {features.map((item, index) => (
              <div key={index} className="text-xs text-[#45556C] flex items-center gap-2">
                {item.icon && (
                  <Image src={item.icon} alt={item.name} width={20} height={20} />
                )}
                <p>{item.name}</p>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-[#62748E] text-sm text-center py-4">لا توجد بيانات حالياً</p>
        )}
      </div>

      {/* WARRANTIES SECTION - Always show */}
      <div className="flex-1 bg-[#F1F5F9] p-3 rounded-md">
        <h3 className="text-[#052531] font-bold text-md">الضمانات</h3>
        <hr className="my-2 border-[#CAD5E2]" />

        {warranties.length > 0 ? (
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            {warranties.map((w, index) => (
              <div key={index} className="text-xs text-[#45556C] flex items-start gap-2">
                {w.icon && (
                  <Image src={w.icon} alt={w.name} width={20} height={20} />
                )}
                <div className="flex flex-col gap-2">
                  <p>{w.name}</p>
                  <span className="text-[#62748E] text-xs">{w.period}</span>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-[#62748E] text-sm text-center py-4">لا توجد بيانات حالياً</p>
        )}
      </div>
    </div>
  );
};

export default FeaturesWarranties;