'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { Download, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useInstallPrompt } from '@/hooks/use-install-prompt';

export function InstallPrompt() {
  const { isInstallable, install, dismiss } = useInstallPrompt();

  return (
    <AnimatePresence>
      {isInstallable && (
        <motion.div
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: 100, opacity: 0 }}
          className="fixed bottom-20 md:bottom-6 left-4 right-4 z-50 mx-auto max-w-md"
        >
          <div className="rounded-2xl border border-border/50 bg-card p-4 shadow-xl flex items-center gap-3">
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl gradient-primary">
              <Download className="h-5 w-5 text-white" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-semibold">Install Nadhom Smart</p>
              <p className="text-xs text-muted-foreground">Akses lebih cepat dari home screen</p>
            </div>
            <div className="flex items-center gap-1.5">
              <Button size="sm" className="rounded-xl gradient-primary border-0 text-white text-xs h-8" onClick={install}>
                Install
              </Button>
              <Button size="icon" variant="ghost" className="h-8 w-8 rounded-full" onClick={dismiss}>
                <X className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}