Untitled

import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectItem, SelectTrigger, SelectValue, SelectContent } from "@/components/ui/select";

const ProductHuntingTool = () => {
  const [products, setProducts] = useState([
    { id: 1, name: "Laptop", category: "Electronics", price: 1000 },
    { id: 2, name: "Sneakers", category: "Fashion", price: 150 },
    { id: 3, name: "Coffee Maker", category: "Home Appliances", price: 80 },
    { id: 4, name: "Smartphone", category: "Electronics", price: 700 },
    { id: 5, name: "T-Shirt", category: "Fashion", price: 20 },
  ]);

  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("All");

  const filteredProducts = products.filter((product) => {
    const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = selectedCategory === "All" || product.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Product Hunting Tool</h1>

      <div className="flex gap-4 mb-6">
        <Input
          type="text"
          placeholder="Search for products..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-1/2"
        />

        <Select onValueChange={(value) => setSelectedCategory(value)}>
          <SelectTrigger className="w-1/4">
            <SelectValue placeholder="Filter by Category" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="All">All</SelectItem>
            <SelectItem value="Electronics">Electronics</SelectItem>
            <SelectItem value="Fashion">Fashion</SelectItem>
            <SelectItem value="Home Appliances">Home Appliances</SelectItem>
          </SelectContent>
        </Select>

        <Button onClick={() => setSearchTerm("")}>Clear</Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {filteredProducts.map((product) => (
          <Card key={product.id} className="border p-4">
            <CardContent>
              <h2 className="text-xl font-semibold">{product.name}</h2>
              <p className="text-gray-600">Category: {product.category}</p>
              <p className="text-green-600 font-bold">${product.price}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {filteredProducts.length === 0 && (
        <p className="text-center text-gray-500">No products found.</p>
      )}
    </div>
  );
};

export default ProductHuntingTool;