'use client'

import { useState } from 'react'
import { usePWA } from '@/hooks/use-pwa'
import { Download, X, Smartphone } from 'lucide-react'
import { Button } from '@/components/ui/button'

export function PWAInstallBanner() {
  const { installPrompt, isInstalled, install } = usePWA()
  const [dismissed, setDismissed] = useState(false)

  if (!installPrompt || isInstalled || dismissed) return null

  return (
    <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-6 md:w-96 z-50 animate-in slide-in-from-bottom-4 duration-300">
      <div className="bg-white rounded-2xl shadow-2xl border p-4 flex items-start gap-3">
        <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center shrink-0">
          <Smartphone className="w-6 h-6 text-white" />
        </div>

        <div className="flex-1 min-w-0">
          <p className="font-bold text-gray-900 text-sm">ثبّت عقار ديزاين</p>
          <p className="text-xs text-gray-500 mt-0.5 mb-3">
            أضف التطبيق لشاشتك الرئيسية للوصول السريع بدون إنترنت
          </p>
          <div className="flex gap-2">
            <Button size="sm" onClick={install} className="gap-1.5 text-xs h-8">
              <Download className="w-3.5 h-3.5" />
              تثبيت
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setDismissed(true)} className="text-xs h-8 text-gray-500">
              لاحقاً
            </Button>
          </div>
        </div>

        <button
          onClick={() => setDismissed(true)}
          className="text-gray-400 hover:text-gray-600 mt-0.5 shrink-0"
          aria-label="إغلاق"
        >
          <X className="w-4 h-4" />
        </button>
      </div>
    </div>
  )
}