import React from 'react';
import { Clock, Banknote, MapPin } from 'lucide-react';

interface InfoHighlightsProps {
  description: string;
  highlights: {
    icon: 'clock' | 'price' | 'map';
    title: string;
    description: string;
  }[];
}

const iconMap = {
  clock: Clock,
  price: Banknote,
  map: MapPin,
};

export const InfoHighlights = ({ description, highlights }: InfoHighlightsProps) => {
  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4 md:px-8 max-w-7xl">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          <div className="lg:col-span-5">
            <h2 className="text-3xl font-bold text-primary mb-6">Szybki montaż, jasne zasady</h2>
            <p className="text-gray-600 text-lg leading-relaxed">
              {description}
            </p>
          </div>
          
          <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-3 gap-6">
            {highlights.map((item, idx) => {
              const Icon = iconMap[item.icon];
              return (
                <div key={idx} className="bg-gray-50 p-6 rounded-xl border border-gray-100 flex flex-col items-center text-center">
                  <div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mb-4 text-accent">
                    <Icon className="w-6 h-6" />
                  </div>
                  <h3 className="font-semibold text-primary mb-2">{item.title}</h3>
                  <p className="text-sm text-gray-500">{item.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};