'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { X, BarChart3 } from 'lucide-react'
import { getCompareList, removeFromCompare, clearCompare, CompareItem } from '@/lib/compare-store'

export function CompareBar() {
  const [items, setItems] = useState<CompareItem[]>([])

  useEffect(() => {
    const update = () => setItems(getCompareList())
    update()
    window.addEventListener('compare-update', update)
    return () => window.removeEventListener('compare-update', update)
  }, [])

  if (items.length === 0) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t shadow-2xl" dir="rtl">
      <div className="container mx-auto px-4 py-3 flex items-center gap-4">
        <div className="flex-1 flex items-center gap-3">
          {items.map(item => (
            <div key={item.id} className="flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-1.5 border text-sm">
              {item.image && (
                <div className="w-8 h-8 rounded bg-gray-200 bg-cover bg-center shrink-0" style={{ backgroundImage: `url(${item.image})` }} />
              )}
              <span className="truncate max-w-[120px]">{item.title}</span>
              <button onClick={() => removeFromCompare(item.id)} className="text-gray-400 hover:text-red-500 mr-1">
                <X className="w-3.5 h-3.5" />
              </button>
            </div>
          ))}
        </div>
        <Link
          href="/compare"
          className="flex items-center gap-2 bg-blue-600 text-white px-5 py-2 rounded-xl text-sm font-medium hover:bg-blue-700 transition-colors shrink-0"
        >
          <BarChart3 className="w-4 h-4" />
          مقارنة ({items.length})
        </Link>
        <button onClick={clearCompare} className="text-xs text-gray-400 hover:text-red-500 shrink-0">
          إزالة الكل
        </button>
      </div>
    </div>
  )
}