import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Flame } from "lucide-react";
import { motion } from "framer-motion";

const nemesis = {
  name: "The Phantom Notification",
  image: "/images/phantom-notification.jpg", // Replace with your image path
  crimes: [
    "Lit up your phone with no message",
    "Repeated the offense every hour",
    "Gave you false hope of a DM"
  ],
  monologue: "You looked. You *hoped*. But it was me — a ghost of a DM long since read.",
  evilRating: 4,
  type: "Digital Saboteur"
};

export default function NemesisOfTheDay() {
  return (
    <main className="p-6 max-w-3xl mx-auto">
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <h1 className="text-4xl font-bold text-center mb-4">Nemesis of the Day</h1>
        <Card className="rounded-2xl shadow-xl">
          <img
            src={nemesis.image}
            alt={nemesis.name}
            className="w-full h-64 object-cover rounded-t-2xl"
          />
          <CardContent className="p-6 space-y-4">
            <h2 className="text-2xl font-bold">{nemesis.name}</h2>
            <p className="italic text-gray-600">{nemesis.type}</p>
            <div>
              <h3 className="font-semibold">Crimes:</h3>
              <ul className="list-disc list-inside">
                {nemesis.crimes.map((crime, idx) => (
                  <li key={idx}>{crime}</li>
                ))}
              </ul>
            </div>
            <blockquote className="border-l-4 pl-4 italic text-gray-700">
              “{nemesis.monologue}”
            </blockquote>
            <div className="flex items-center">
              <span className="font-semibold mr-2">Evil Rating:</span>
              {[...Array(nemesis.evilRating)].map((_, i) => (
                <Flame key={i} className="text-red-500 w-5 h-5" />
              ))}
            </div>
            <Button variant="destructive" className="mt-4">Defeat This Nemesis</Button>
          </CardContent>
        </Card>
      </motion.div>
    </main>
  );
}