Add Vedic astrology to your
React Native app

// hooks/useBirthChart.ts
import { useState, useEffect } from 'react';

const API_KEY = process.env.EXPO_PUBLIC_VEDINTEL_API_KEY;
const BASE_URL = 'https://vedintelastroapi.com/api/v1';

interface BirthChartParams {
  dob: string;   // 'DD/MM/YYYY'
  tob: string;   // 'HH:MM' (24-hour)
  lat: number;
  lon: number;
  tz?: number;   // default 5.5 for IST
}

interface BirthChartResult {
  ascendant: string;
  ascendant_lord: string;
  degree: number;
  nakshatra: string;
  sun_sign: string;
  moon_sign: string;
}

export function useBirthChart(params: BirthChartParams | null) {
  const [data, setData] = useState<BirthChartResult | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!params) return;
    setLoading(true);
    setError(null);

    const query = new URLSearchParams({
      api_key: API_KEY!,
      dob: params.dob,
      tob: params.tob,
      lat: String(params.lat),
      lon: String(params.lon),
      tz: String(params.tz ?? 5.5),
    });

    fetch(`${BASE_URL}/extended-horoscope/find-ascendant?${query}`)
      .then(r => r.json())
      .then(json => {
        if (json.status === 200) setData(json.response);
        else setError(json.error ?? 'API error');
      })
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, [params?.dob, params?.tob, params?.lat, params?.lon]);

  return { data, loading, error };
}

// Usage in your screen:
// const { data, loading } = useBirthChart({
//   dob: '01/10/1977', tob: '11:40', lat: 11, lon: 77
// });
//
// Response when loaded:
// {
//   "ascendant": "Scorpio",
//   "ascendant_lord": "Mars",
//   "degree": 22.47,
//   "nakshatra": "Jyeshtha",
//   "sun_sign": "Virgo",
//   "moon_sign": "Aries"
// }

// screens/KundaliMatchScreen.tsx
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';

const API_KEY = process.env.EXPO_PUBLIC_VEDINTEL_API_KEY;
const BASE_URL = 'https://vedintelastroapi.com/api/v1';

interface MatchParams {
  dob: string; tob: string; lat: number; lon: number; tz: number;
}

async function getKundaliMatchScore(
  boy: MatchParams,
  girl: MatchParams
): Promise<{ total_score: number; max_score: number; compatibility: string }> {
  const query = new URLSearchParams({
    api_key: API_KEY!,
    // Boy's details
    m_dob: boy.dob,   m_tob: boy.tob,
    m_lat: String(boy.lat),   m_lon: String(boy.lon),   m_tz: String(boy.tz),
    // Girl's details
    f_dob: girl.dob,  f_tob: girl.tob,
    f_lat: String(girl.lat),  f_lon: String(girl.lon),  f_tz: String(girl.tz),
  });

  const response = await fetch(
    `${BASE_URL}/matching/north-match?${query}`
  );
  const json = await response.json();

  if (json.status !== 200) throw new Error(json.error ?? 'Matching failed');
  return json.response;
}

export default function KundaliMatchScreen() {
  const [score, setScore] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);

  const runMatch = async () => {
    setLoading(true);
    try {
      const result = await getKundaliMatchScore(
        { dob: '01/10/1977', tob: '11:40', lat: 11, lon: 77, tz: 5.5 },
        { dob: '15/06/1980', tob: '08:30', lat: 19.07, lon: 72.87, tz: 5.5 }
      );
      setScore(result.total_score);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TouchableOpacity onPress={runMatch} style={{ backgroundColor: '#4f46e5', padding: 14, borderRadius: 10 }}>
        <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>Check Compatibility</Text>
      </TouchableOpacity>
      {loading && <ActivityIndicator color="#4f46e5" style={{ marginTop: 20 }} />}
      {score !== null && (
        <Text style={{ color: 'white', fontSize: 32, textAlign: 'center', marginTop: 20, fontWeight: '800' }}>
          {score} / 36
        </Text>
      )}
    </View>
  );
}

// Response:
// {
//   "total_score": 28,
//   "max_score": 36,
//   "compatibility": "Excellent",
//   "koot_details": { "varna": 1, "vashya": 2, ... }
// }

// components/TodayPanchang.tsx
import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import * as Location from 'expo-location';   // expo-location

const API_KEY = process.env.EXPO_PUBLIC_VEDINTEL_API_KEY;
const BASE_URL = 'https://vedintelastroapi.com/api/v1';

function todayDDMMYYYY() {
  const d = new Date();
  const dd = String(d.getDate()).padStart(2, '0');
  const mm = String(d.getMonth() + 1).padStart(2, '0');
  return `${dd}/${mm}/${d.getFullYear()}`;
}

export default function TodayPanchang() {
  const [panchang, setPanchang] = useState<Record<string, string> | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      // 1. Request location permission
      const { status } = await Location.requestForegroundPermissionsAsync();
      const coords = status === 'granted'
        ? (await Location.getCurrentPositionAsync({})).coords
        : { latitude: 28.6139, longitude: 77.2090 }; // fallback: Delhi

      // 2. Determine timezone offset
      const tz = -(new Date().getTimezoneOffset() / 60);

      // 3. Fetch panchang
      const query = new URLSearchParams({
        api_key: API_KEY!,
        date: todayDDMMYYYY(),
        lat: String(coords.latitude),
        lon: String(coords.longitude),
        tz: String(tz),
      });

      const res = await fetch(`${BASE_URL}/panchang/panchang?${query}`);
      const json = await res.json();
      if (json.status === 200) setPanchang(json.response);
      setLoading(false);
    })();
  }, []);

  if (loading) return <ActivityIndicator color="#4f46e5" />;
  if (!panchang) return <Text style={{ color: 'red' }}>Failed to load panchang</Text>;

  const rows = [
    ['Tithi', panchang.tithi],
    ['Nakshatra', panchang.nakshatra],
    ['Yoga', panchang.yoga],
    ['Karana', panchang.karana],
    ['Sunrise', panchang.sunrise],
    ['Sunset', panchang.sunset],
  ];

  return (
    <View style={{ backgroundColor: '#111827', borderRadius: 12, padding: 20 }}>
      <Text style={{ color: '#f1f5f9', fontWeight: '700', fontSize: 18, marginBottom: 16 }}>
        Today's Panchang
      </Text>
      {rows.map(([label, value]) => (
        <View key={label} style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10 }}>
          <Text style={{ color: '#64748b', fontSize: 14 }}>{label}</Text>
          <Text style={{ color: '#f1f5f9', fontSize: 14, fontWeight: '600' }}>{value}</Text>
        </View>
      ))}
    </View>
  );
}