Weather Card

import React, { useState, useEffect } from "react";
import { Sun, Cloud, CloudRain, Zap } from "lucide-react";
import { WeatherCard, type WeatherCardProps } from "@/components/ui/weather-card"; // Adjust the import path as needed

// Define the type for weather styles keys
type WeatherCondition = "Sunny" | "Cloudy" | "Rainy" | "Stormy";

// Sample data to cycle through for the demo
const weatherData: (Omit<WeatherCardProps, 'condition'> & { condition: WeatherCondition })[] = [
  {
    temperature: 28,
    high: 32,
    low: 25,
    location: "Ludhiana, Punjab",
    condition: "Sunny",
    icon: <Sun />,
  },
  {
    temperature: 22,
    high: 26,
    low: 20,
    location: "Mumbai, Maharashtra",
    condition: "Cloudy",
    icon: <Cloud />,
  },
  {
    temperature: 18,
    high: 21,
    low: 16,
    location: "Bengaluru, Karnataka",
    condition: "Rainy",
    icon: <CloudRain />,
  },
  {
    temperature: 25,
    high: 28,
    low: 22,
    location: "Kolkata, West Bengal",
    condition: "Stormy",
    icon: <Zap />,
  },
];

export default function WeatherCardDemo() {
  const [currentIndex, setCurrentIndex] = useState(0);

  // Effect to change the weather data every 3 seconds to showcase animations
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % weatherData.length);
    }, 3000);

    // Cleanup interval on component unmount
    return () => clearInterval(interval);
  }, []);

  const currentData = weatherData[currentIndex];

  return (
    <div className="flex h-full w-full items-center justify-center rounded-lg bg-background p-4">
      <WeatherCard
        temperature={currentData.temperature}
        high={currentData.high}
        low={currentData.low}
        location={currentData.location}
        condition={currentData.condition}
        icon={currentData.icon}
      />
    </div>
  );
}