Weather and calendar widget

import { motion } from "framer-motion";
import { CalendarDays, CloudSun } from "lucide-react";

interface WeatherWidgetProps {
  temp?: number;
  city?: string;
  eventDate?: string;
  eventTitle?: string;
}

export default function WeatherWidget({
  temp = 23,
  city = "Madrid",
  eventDate = "Friday, 25",
  eventTitle = "Dinner · 8:30 PM",
}: WeatherWidgetProps) {
  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      transition={{ type: "spring", stiffness: 300, damping: 30 }}
      className="w-64 rounded-[28px] bg-white/70 p-5 text-[#1d1d1f] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)] backdrop-blur-[20px] dark:bg-black/70 dark:text-[#f5f5f7]"
    >
      <div className="flex justify-between">
        <div>
          <p className="text-xs text-[#86868b]">{city}</p>
          <strong className="text-4xl font-medium">{temp}°</strong>
        </div>
        <CloudSun className="h-10 w-10 text-[#0071e3]" />
      </div>
      <div className="my-4 h-px bg-black/10 dark:bg-white/10" />
      <div className="flex items-center gap-3">
        <CalendarDays className="h-8 w-8 text-[#0071e3]" />
        <div>
          <b className="text-sm">{eventDate}</b>
          <p className="text-xs text-[#86868b]">{eventTitle}</p>
        </div>
      </div>
    </motion.div>
  );
}