Horoscope Predictions API

import React, { useState, useEffect } from 'react';

function HoroscopeWidget({ sign, type = 'daily' }) {
  const [horoscope, setHoroscope] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchHoroscope();
  }, [sign, type]);

  const fetchHoroscope = async () => {
    try {
      setLoading(true);
      const response = await fetch(
        \`https://api.astro-fusion.com/v1/calculations/horoscope/\${type}/\${sign}\`,
        {
          headers: {
            'Authorization': 'Bearer YOUR_API_KEY',
            'Content-Type': 'application/json'
          }
        }
      );

      if (!response.ok) {
        throw new Error('Failed to fetch horoscope');
      }

      const data = await response.json();
      setHoroscope(data);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <div>Loading horoscope...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className="horoscope-widget">
      <h3>{horoscope.sign} {type.charAt(0).toUpperCase() + type.slice(1)} Horoscope</h3>
      <p>{horoscope.prediction}</p>

      {horoscope.lucky && (
        <div className="lucky-info">
          <p>Lucky Number: {horoscope.lucky.number}</p>
          <p>Lucky Color: {horoscope.lucky.color}</p>
        </div>
      )}

      {horoscope.remedies && horoscope.remedies.length > 0 && (
        <div className="remedies">
          <h4>Remedies:</h4>
          <ul>
            {horoscope.remedies.map((remedy, index) => (
              <li key={index}>{remedy}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

export default HoroscopeWidget;

<template>
  <div class="horoscope-app">
    <select v-model="selectedSign">
      <option value="aries">Aries</option>
      <option value="taurus">Taurus</option>
      <option value="gemini">Gemini</option>
      <option value="cancer">Cancer</option>
      <option value="leo">Leo</option>
      <option value="virgo">Virgo</option>
      <option value="libra">Libra</option>
      <option value="scorpio">Scorpio</option>
      <option value="sagittarius">Sagittarius</option>
      <option value="capricorn">Capricorn</option>
      <option value="aquarius">Aquarius</option>
      <option value="pisces">Pisces</option>
    </select>

    <div v-if="loading">Loading horoscope...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else-if="horoscope" class="horoscope-content">
      <h3>{{ horoscope.sign }} Daily Horoscope</h3>
      <p>{{ horoscope.prediction }}</p>

      <div class="lucky-section">
        <h4>Lucky Elements</h4>
        <p>Number: {{ horoscope.lucky.number }}</p>
        <p>Color: {{ horoscope.lucky.color }}</p>
        <p>Stone: {{ horoscope.lucky.stone }}</p>
      </div>

      <div class="remedies-section">
        <h4>Recommended Remedies</h4>
        <ul>
          <li v-for="remedy in horoscope.remedies" :key="remedy">
            {{ remedy }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HoroscopeApp',
  data() {
    return {
      selectedSign: 'aries',
      horoscope: null,
      loading: false,
      error: null
    }
  },
  watch: {
    selectedSign() {
      this.fetchHoroscope();
    }
  },
  mounted() {
    this.fetchHoroscope();
  },
  methods: {
    async fetchHoroscope() {
      try {
        this.loading = true;
        this.error = null;

        const response = await fetch(
          \`https://api.astro-fusion.com/v1/calculations/horoscope/daily/\${this.selectedSign}\`,
          {
            headers: {
              'Authorization': 'Bearer YOUR_API_KEY',
              'Content-Type': 'application/json'
            }
          }
        );

        if (!response.ok) {
          throw new Error('Failed to fetch horoscope');
        }

        this.horoscope = await response.json();
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.horoscope-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.horoscope-content {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.lucky-section, .remedies-section {
  margin-top: 20px;
  padding: 15px;
  background: white;
  border-radius: 6px;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
}
</style>