import React from 'react';
import { CreditCard, PackageOpen, Award, Truck, ShieldCheck, RefreshCw } from 'lucide-react';
import { SiteSettings } from '../types';

interface FeaturesRowProps {
  settings?: SiteSettings;
}

const resolveIcon = (iconName: string) => {
  switch (iconName) {
    case 'CreditCard': return <CreditCard className="text-[#634C9F]" size={28} strokeWidth={1.5} />;
    case 'PackageOpen': return <PackageOpen className="text-amber-500" size={28} strokeWidth={1.5} />;
    case 'Truck': return <Truck className="text-amber-500" size={28} strokeWidth={1.5} />;
    case 'ShieldCheck': return <ShieldCheck className="text-[#634C9F]" size={28} strokeWidth={1.5} />;
    case 'RefreshCw': return <RefreshCw className="text-amber-500" size={28} strokeWidth={1.5} />;
    default: return <Award className="text-[#634C9F]" size={28} strokeWidth={1.5} />;
  }
};

const FeaturesRow: React.FC<FeaturesRowProps> = ({ settings }) => {
  let homeConfig: any = {};
  if (settings?.homePageJson) {
    try { homeConfig = JSON.parse(settings.homePageJson); } catch(e) {}
  }
  
  const features = homeConfig.features || [
    {
      icon: <CreditCard className="text-[#634C9F]" size={28} strokeWidth={1.5} />,
      title: 'Payment only online',
      desc: 'Secure payment from everywhere. We ensure it.',
    },
    {
      icon: <PackageOpen className="text-amber-500" size={28} strokeWidth={1.5} />,
      title: 'New stocks and sales',
      desc: 'Weekly stocks update. Buy directly. Don\'t worry.',
    },
    {
      icon: <Award className="text-[#634C9F]" size={28} strokeWidth={1.5} />,
      title: 'Quality assurance',
      desc: 'We guarantee product quality. If false, full money back!',
    },
    {
      icon: <Truck className="text-amber-500" size={28} strokeWidth={1.5} />,
      title: 'Delivery from 1 hour',
      desc: 'Express delivery. Fast shipping across the country.',
    },
  ];

  return (
    <section className="bg-white border-b border-gray-100">
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6">
          {features.map((feature, idx) => (
            <div key={idx} className="flex flex-col items-center text-center px-4">
              <div className="mb-4 bg-gray-50 p-4 rounded-full">
                {resolveIcon(feature.icon || '')}
              </div>
              <h3 className="text-sm font-bold text-[#202342] mb-2">{feature.title}</h3>
              <p className="text-xs text-gray-500 leading-relaxed max-w-[200px]">
                {feature.subtitle || feature.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default FeaturesRow;
