'use client'

import { Zap, Shield, Globe, Smartphone } from 'lucide-react'

interface Item {
  id: string
  title: string
  description: string
  icon: 'zap' | 'shield' | 'globe' | 'smartphone'
}

interface ItemsProps {
  items?: Item[]
}

const defaultItems: Item[] = [
  {
    id: 'fast',
    title: 'Lightning Fast',
    description: 'Deploy your portfolio instantly and reach global audiences with blazing-fast loading times.',
    icon: 'zap',
  },
  {
    id: 'secure',
    title: 'Secure & Reliable',
    description: 'Enterprise-grade security with automatic SSL certificates and 99.9% uptime guarantee.',
    icon: 'shield',
  },
  {
    id: 'domain',
    title: 'Custom Domains',
    description: 'Use your own domain name to create a professional online presence.',
    icon: 'globe',
  },
  {
    id: 'mobile',
    title: 'Mobile Optimized',
    description: 'Your portfolio looks perfect on all devices from smartphones to desktops.',
    icon: 'smartphone',
  },
]

const iconComponents = {
  zap: Zap,
  shield: Shield,
  globe: Globe,
  smartphone: Smartphone,
}

export default function Items({ items = defaultItems }: ItemsProps) {
  return (
    <section className="py-16 md:py-24 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Why Choose Portfolio Host?</h2>
          <p className="text-lg text-muted-foreground">
            Everything you need to share your work with the world
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {items.map((item) => {
            const Icon = iconComponents[item.icon]
            return (
              <div
                key={item.id}
                className="p-6 rounded-lg border hover:shadow-lg transition"
              >
                <Icon size={40} className="text-primary mb-4" />
                <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
                <p className="text-muted-foreground">{item.description}</p>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}