Untitled

import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Star } from "lucide-react";
import { motion } from "framer-motion";

export default function RePro() {
  const [search, setSearch] = useState("");
  const reviews = [
    {
      product: "Sony WH-1000XM5 Headphones",
      rating: 4.7,
      review: "Amazing noise cancellation and sound quality!",
      reviewer: "JohnDoe92",
    },
    {
      product: "Apple MacBook Pro 16”",
      rating: 4.9,
      review: "Incredible performance and display. Worth the price!",
      reviewer: "TechGuru",
    },
  ];

  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-4xl font-bold mb-4 text-center text-gray-800">
          RePro: Honest Product Reviews
        </h1>
        <div className="flex items-center space-x-2 mb-6">
          <Input
            placeholder="Search for a product..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full p-3 border rounded-lg shadow-sm"
          />
          <Button className="bg-blue-600 text-white px-4 py-2 rounded-lg">
            Search
          </Button>
        </div>
        <div className="grid gap-4">
          {reviews.map((item, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3 }}
            >
              <Card className="bg-white shadow-md rounded-xl p-4">
                <CardHeader>
                  <CardTitle className="text-xl font-semibold">
                    {item.product}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center mb-2">
                    {[...Array(5)].map((_, i) => (
                      <Star
                        key={i}
                        className={
                          i < Math.round(item.rating)
                            ? "text-yellow-400"
                            : "text-gray-300"
                        }
                      />
                    ))}
                    <span className="ml-2 text-gray-600">{item.rating}</span>
                  </div>
                  <p className="text-gray-700">{item.review}</p>
                  <p className="text-sm text-gray-500 mt-2">By {item.reviewer}</p>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}