'use client'

import { usePWA } from '@/hooks/use-pwa'
import { Download, X } from 'lucide-react'

export function PwaInstallPrompt() {
  const { installPrompt, isInstalled, install } = usePWA()

  if (!installPrompt || isInstalled) return null

  return (
    <div className="fixed bottom-4 left-4 z-50 bg-white rounded-2xl shadow-2xl border border-gray-100 p-4 flex items-center gap-4 max-w-sm animate-slide-up">
      <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center shrink-0">
        <svg width="24" height="24" viewBox="0 0 192 192" fill="none">
          <rect x="36" y="84" width="120" height="84" rx="4" fill="white"/>
          <polygon points="96,36 28,88 164,88" fill="white"/>
          <rect x="72" y="116" width="48" height="52" rx="2" fill="#bfdbfe"/>
          <rect x="82" y="132" width="28" height="36" rx="1" fill="#1d4ed8"/>
        </svg>
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-semibold text-gray-900">تثبيت التطبيق</p>
        <p className="text-xs text-gray-500">ثبّت عقار ديزاين على جهازك</p>
      </div>
      <button onClick={install} className="bg-blue-600 text-white px-4 py-2 rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors shrink-0 flex items-center gap-1">
        <Download className="w-4 h-4" />تثبيت
      </button>
    </div>
  )
}