Bookshop

import { useState } from "react";
import { ShoppingCart, BookOpen } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Select, SelectItem } from "@/components/ui/select";

const booksData = [
  {
    id: 1,
    title: "The Alchemist",
    author: "Paulo Coelho",
    price: 4500,
    category: "Fiction",
    image: "https://picsum.photos/200?random=1",
  },
  {
    id: 2,
    title: "Atomic Habits",
    author: "James Clear",
    price: 6500,
    category: "Self-Help",
    image: "https://picsum.photos/200?random=2",
  },
  {
    id: 3,
    title: "Rich Dad Poor Dad",
    author: "Robert Kiyosaki",
    price: 5000,
    category: "Finance",
    image: "https://picsum.photos/200?random=3",
  },
];

export default function Bookshop() {
  const [search, setSearch] = useState("");
  const [category, setCategory] = useState("All");
  const [cart, setCart] = useState(0);

  const filteredBooks = booksData.filter((book) => {
    const matchesSearch =
      book.title.toLowerCase().includes(search.toLowerCase()) ||
      book.author.toLowerCase().includes(search.toLowerCase());
    const matchesCategory =
      category === "All" || book.category === category;
    return matchesSearch && matchesCategory;
  });

  const addToCart = () => {
    setCart(cart + 1);
  };

  return (
    <div className="p-6">
      {/* Header */}
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold flex items-center gap-2">
          <BookOpen className="w-6 h-6" /> Bookshop
        </h1>
        <div className="flex items-center gap-2">
          <Input
            placeholder="Search books..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-64"
          />
          <Select onValueChange={setCategory} defaultValue="All">
            <SelectItem value="All">All</SelectItem>
            <SelectItem value="Fiction">Fiction</SelectItem>
            <SelectItem value="Self-Help">Self-Help</SelectItem>
            <SelectItem value="Finance">Finance</SelectItem>
          </Select>
          <div className="relative">
            <ShoppingCart className="w-6 h-6" />
            {cart > 0 && (
              <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">
                {cart}
              </span>
            )}
          </div>
        </div>
      </div>

      {/* Books Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {filteredBooks.map((book) => (
          <Card key={book.id} className="shadow-lg rounded-2xl">
            <img
              src={book.image}
              alt={book.title}
              className="w-full h-40 object-cover rounded-t-2xl"
            />
            <CardContent className="p-4">
              <h2 className="text-lg font-semibold">{book.title}</h2>
              <p className="text-sm text-gray-500">{book.author}</p>
              <p className="font-bold mt-2">₦{book.price.toLocaleString()}</p>
              <Button
                className="w-full mt-3"
                onClick={addToCart}
              >
                Add to Cart
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}