import React, { useState } from 'react';
import { Home, Grid, Search, ShieldCheck, Truck } from 'lucide-react';

const OnboardingScreen = () => {
  const [currentSlide, setCurrentSlide] = useState(0);

  const handleNext = () => {
    setCurrentSlide((prev) => Math.min(prev + 1, 2));
  };

  const handleSkip = () => {
    // Handle skip navigation
  };

  const slides = [
    {
      image: "https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7dtt.webp",
      title: "Welcome to GizmoMart",
      description: "Your one-stop destination for the latest tech gadgets"
    },
    {
      image: "https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7dvr.webp",
      title: "Easy Navigation",
      isNavigationSlide: true
    },
    {
      image: "https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7dui.webp",
      title: "Start Shopping",
      description: "Discover amazing deals on the latest tech gadgets",
      isFinalSlide: true
    }
  ];

  return (
    <div className="bg-background min-h-screen">
      <div className="relative h-screen overflow-hidden">
        <div className="h-full">
          {currentSlide === 0 && (
            <div className="h-full flex flex-col">
              <div className="flex-1 p-6 flex flex-col items-center justify-center space-y-6">
                <img 
                  src={slides[0].image}
                  alt="Tech Gadgets" 
                  className="w-full rounded-2xl shadow-lg mb-6"
                />
                <h1 className="text-3xl font-bold text-textPrimary text-center">{slides[0].title}</h1>
                <p className="text-textSecondary text-center text-lg">{slides[0].description}</p>
              </div>
              <div className="p-6">
                <button 
                  onClick={handleNext}
                  className="w-full bg-primary text-white py-4 rounded-full font-semibold"
                >
                  Next
                </button>
              </div>
            </div>
          )}

          {currentSlide === 1 && (
            <div className="h-full flex flex-col">
              <div className="flex-1 p-6 flex flex-col items-center justify-center space-y-6">
                <img 
                  src={slides[1].image}
                  alt="Easy Navigation" 
                  className="w-64 h-64 rounded-full shadow-lg mb-6"
                />
                <h2 className="text-2xl font-bold text-textPrimary text-center">{slides[1].title}</h2>
                <div className="flex justify-center space-x-8">
                  <div className="flex flex-col items-center">
                    <Home className="w-8 h-8 text-primary mb-2" />
                    <p className="text-textSecondary text-sm">Browse Home</p>
                  </div>
                  <div className="flex flex-col items-center">
                    <Grid className="w-8 h-8 text-primary mb-2" />
                    <p className="text-textSecondary text-sm">Categories</p>
                  </div>
                  <div className="flex flex-col items-center">
                    <Search className="w-8 h-8 text-primary mb-2" />
                    <p className="text-textSecondary text-sm">Search</p>
                  </div>
                </div>
              </div>
              <div className="p-6">
                <button 
                  onClick={handleNext}
                  className="w-full bg-primary text-white py-4 rounded-full font-semibold"
                >
                  Next
                </button>
              </div>
            </div>
          )}

          {currentSlide === 2 && (
            <div className="h-full flex flex-col">
              <div className="flex-1 p-6 flex flex-col items-center justify-center space-y-6">
                <img 
                  src={slides[2].image}
                  alt="Smart Devices" 
                  className="w-full rounded-2xl shadow-lg mb-6"
                />
                <h2 className="text-2xl font-bold text-textPrimary text-center">{slides[2].title}</h2>
                <p className="text-textSecondary text-center text-lg">{slides[2].description}</p>
                <div className="flex items-center justify-center space-x-2">
                  <ShieldCheck className="w-6 h-6 text-primary" />
                  <span className="text-textSecondary">Secure Payments</span>
                </div>
                <div className="flex items-center justify-center space-x-2">
                  <Truck className="w-6 h-6 text-primary" />
                  <span className="text-textSecondary">Fast Delivery</span>
                </div>
              </div>
              <div className="p-6 space-y-4">
                <button 
                  onClick={handleNext}
                  className="w-full bg-primary text-white py-4 rounded-full font-semibold"
                >
                  Get Started
                </button>
                <button 
                  onClick={handleSkip}
                  className="w-full bg-transparent text-primary py-4 rounded-full font-semibold border border-primary"
                >
                  Skip Tutorial
                </button>
              </div>
            </div>
          )}
        </div>

        <div className="absolute bottom-32 left-0 right-0">
          <div className="flex justify-center space-x-2">
            {[0, 1, 2].map((index) => (
              <div 
                key={index}
                className={`w-2 h-2 rounded-full ${
                  currentSlide === index ? 'bg-primary' : 'bg-border'
                }`}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default OnboardingScreen;