import React from 'react';
import { ShieldCheck, Tag, Truck, ShieldAlert } from 'lucide-react';

export const FeatureBar: React.FC = () => {
  const features = [
    {
      icon: ShieldCheck,
      title: 'Premium Quality',
      subtitle: 'Best quality products',
    },
    {
      icon: Tag,
      title: 'Best Prices',
      subtitle: 'Competitive & affordable',
    },
    {
      icon: Truck,
      title: 'Fast Delivery',
      subtitle: 'Quick & reliable shipping',
    },
    {
      icon: ShieldAlert,
      title: 'Secure Shopping',
      subtitle: '100% safe & trusted',
    },
  ];

  return (
    <section className="max-w-5xl mx-auto px-4 my-10">
      <div className="bg-[#FFFDFB] rounded-2xl border border-[#F2E5D9] p-5 sm:p-6 shadow-sm grid grid-cols-2 lg:grid-cols-4 gap-6">
        {features.map((item, idx) => {
          const IconComp = item.icon;
          return (
            <div key={idx} className="flex items-center gap-3.5 group">
              <div className="w-11 h-11 rounded-xl bg-rose-50 border border-rose-100 flex items-center justify-center text-[#C81E3D] shrink-0 group-hover:bg-[#C81E3D] group-hover:text-white transition-all duration-300">
                <IconComp className="w-5 h-5 stroke-[2]" />
              </div>
              <div className="text-left space-y-0.5">
                <h4 className="text-xs sm:text-sm font-bold text-[#1E2432]">
                  {item.title}
                </h4>
                <p className="text-[11px] text-slate-500 font-medium leading-tight">
                  {item.subtitle}
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
};