"use client"

import * as React from "react"
import { motion } from "framer-motion"
import { staggerContainer } from "@/lib/motion"
import {
  Activity,
  Cpu,
  Zap,
  Soup,
  FlaskConical,
  Monitor,
  Car,
  ShoppingBag,
  ArrowRight,
  Bot
} from "lucide-react"

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  "ti-heartbeat": Activity,
  "ti-cpu": Cpu,
  "ti-bolt": Zap,
  "ti-salad": Soup,
  "ti-flask": FlaskConical,
  "ti-device-desktop": Monitor,
  "ti-car": Car,
  "ti-shopping-bag": ShoppingBag,
}

function RenderIcon({ name, className }: { name: string; className?: string }) {
  const Icon = iconMap[name] || Bot
  return <Icon className={className} />
}

interface IndustryItem {
  title: string
  stats: string
  icon: string
  url?: string
}

interface BrowseData {
  badge: string
  title: string
  cta: string
  items: IndustryItem[]
}

export function DataOneBrowse({ data }: { data: BrowseData }) {
  if (!data) return null

  return (
    <section className="bg-white py-18 pb-20 border-b border-hairline">
      <div className="max-w-[1240px] mx-auto px-7">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="space-y-8"
        >
          {/* Header */}
          <div className="flex justify-between items-end gap-6 flex-wrap">
            <div className="space-y-3">
              <div className="inline-flex items-center gap-2 text-[11px] font-bold tracking-wider uppercase text-gold">
                <span className="w-5 h-[1.5px] bg-gold" />
                {data.badge}
              </div>
              <h2 className="font-display text-[34px] leading-[1.12] tracking-[-0.3px] text-ink">
                {data.title}
              </h2>
            </div>
            <span className="text-[13.5px] font-semibold text-navy hover:text-gold transition-colors flex items-center gap-1.5 cursor-pointer group lift">
              {data.cta}
              <ArrowRight className="size-3.5 group-hover:translate-x-1 transition-transform" />
            </span>
          </div>

          {/* Grid list */}
          <div className="grid md:grid-cols-4 gap-[1px] bg-hairline border border-hairline">
            {data.items.map((item, idx) => (
              <div
                key={idx}
                className="bg-white p-5.5 hover:bg-navy/[0.03] hover:-translate-y-0.5 hover:shadow-md transition-all duration-200 cursor-pointer"
              >
                <RenderIcon name={item.icon} className="size-6 text-navy mb-3" />
                <h3 className="text-[14.5px] font-semibold text-ink mb-1">
                  {item.title}
                </h3>
                <div className="text-[12px] text-muted-gray leading-normal font-sans">
                  {item.stats}
                </div>
              </div>
            ))}
          </div>

        </motion.div>
      </div>
    </section>
  )
}