import React from 'react';
import { Home, Grid, Search, ShoppingCart, User, Smartphone, Gamepad2, Cable, ChevronRight } from 'lucide-react';

const CategoriesScreen = () => {
  return (
    <div className="bg-background min-h-screen">
      {/* Header */}
      <header className="sticky top-0 bg-surface shadow-sm z-10">
        <div className="px-4 py-4">
          <h1 className="text-2xl font-bold text-textPrimary">Categories</h1>
        </div>
      </header>

      {/* Main Content */}
      <main className="pb-20">
        {/* Featured Categories Grid */}
        <div className="p-4 grid grid-cols-2 gap-4">
          {/* Laptops & Computers */}
          <div className="bg-surface rounded-xl shadow-md overflow-hidden">
            <img 
              src="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7evx.webp"
              alt="Laptops"
              className="w-full h-40 object-cover"
            />
            <div className="p-3">
              <h3 className="font-semibold text-textPrimary">Laptops & Computers</h3>
              <p className="text-sm text-textSecondary">238 items</p>
            </div>
          </div>

          {/* Audio & Headphones */}
          <div className="bg-surface rounded-xl shadow-md overflow-hidden">
            <img 
              src="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7ewf.webp"
              alt="Audio"
              className="w-full h-40 object-cover"
            />
            <div className="p-3">
              <h3 className="font-semibold text-textPrimary">Audio & Headphones</h3>
              <p className="text-sm text-textSecondary">156 items</p>
            </div>
          </div>

          {/* Wearables */}
          <div className="bg-surface rounded-xl shadow-md overflow-hidden">
            <img 
              src="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7f0l.webp"
              alt="Wearables"
              className="w-full h-40 object-cover"
            />
            <div className="p-3">
              <h3 className="font-semibold text-textPrimary">Wearables</h3>
              <p className="text-sm text-textSecondary">94 items</p>
            </div>
          </div>

          {/* Cameras */}
          <div className="bg-surface rounded-xl shadow-md overflow-hidden">
            <img 
              src="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7ez8.webp"
              alt="Cameras"
              className="w-full h-40 object-cover"
            />
            <div className="p-3">
              <h3 className="font-semibold text-textPrimary">Cameras</h3>
              <p className="text-sm text-textSecondary">127 items</p>
            </div>
          </div>
        </div>

        {/* Other Categories List */}
        <div className="px-4 mt-4">
          <h2 className="text-lg font-semibold text-textPrimary mb-3">More Categories</h2>
          <div className="bg-surface rounded-xl shadow-sm divide-y divide-border">
            {/* Smartphones */}
            <div className="flex items-center p-4">
              <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                <Smartphone className="w-6 h-6 text-primary" />
              </div>
              <div className="ml-4 flex-1">
                <h3 className="text-textPrimary font-medium">Smartphones</h3>
                <p className="text-sm text-textSecondary">182 items</p>
              </div>
              <ChevronRight className="w-5 h-5 text-textSecondary" />
            </div>

            {/* Gaming */}
            <div className="flex items-center p-4">
              <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                <Gamepad2 className="w-6 h-6 text-primary" />
              </div>
              <div className="ml-4 flex-1">
                <h3 className="text-textPrimary font-medium">Gaming</h3>
                <p className="text-sm text-textSecondary">145 items</p>
              </div>
              <ChevronRight className="w-5 h-5 text-textSecondary" />
            </div>

            {/* Smart Home */}
            <div className="flex items-center p-4">
              <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                <Home className="w-6 h-6 text-primary" />
              </div>
              <div className="ml-4 flex-1">
                <h3 className="text-textPrimary font-medium">Smart Home</h3>
                <p className="text-sm text-textSecondary">98 items</p>
              </div>
              <ChevronRight className="w-5 h-5 text-textSecondary" />
            </div>

            {/* Accessories */}
            <div className="flex items-center p-4">
              <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                <Cable className="w-6 h-6 text-primary" />
              </div>
              <div className="ml-4 flex-1">
                <h3 className="text-textPrimary font-medium">Accessories</h3>
                <p className="text-sm text-textSecondary">267 items</p>
              </div>
              <ChevronRight className="w-5 h-5 text-textSecondary" />
            </div>
          </div>
        </div>
      </main>

      {/* Bottom Navigation */}
      <nav className="fixed bottom-0 w-full bg-surface border-t border-border">
        <div className="flex justify-between px-6 py-2">
          <a href="#" className="flex flex-col items-center">
            <Home className="w-6 h-6 text-textSecondary" />
            <span className="text-xs text-textSecondary mt-1">Home</span>
          </a>
          <a href="#" className="flex flex-col items-center">
            <Grid className="w-6 h-6 text-primary" />
            <span className="text-xs text-primary mt-1">Categories</span>
          </a>
          <a href="#" className="flex flex-col items-center">
            <Search className="w-6 h-6 text-textSecondary" />
            <span className="text-xs text-textSecondary mt-1">Search</span>
          </a>
          <a href="#" className="flex flex-col items-center">
            <ShoppingCart className="w-6 h-6 text-textSecondary" />
            <span className="text-xs text-textSecondary mt-1">Cart</span>
          </a>
          <a href="#" className="flex flex-col items-center">
            <User className="w-6 h-6 text-textSecondary" />
            <span className="text-xs text-textSecondary mt-1">Account</span>
          </a>
        </div>
      </nav>
    </div>
  );
};

export default CategoriesScreen;