'use client';
import React, { useEffect, useState } from 'react';
import { Text } from '@/components/ui/text';
import { API_ENDPOINTS } from '@/constants';
import { globalApiGet } from '@/services/global/globalApiCalls';
import ThemeSwitcher from './ThemeSwitcher';
import Utilities from './Utilities';

interface DashboardQuote {
  quote_master_name?: string;
  [key: string]: any;
}

const BottomBar: React.FC = () => {
  const [dashboardQuote, setDashboardQuote] = useState<DashboardQuote>({});

  useEffect(() => {
    const fetchDashboardQuote = async () => {
      try {
        const quote = await globalApiGet<DashboardQuote>(
          API_ENDPOINTS.MASTERS.QUOTE.DASHBOARD,
        );
        setDashboardQuote(quote ?? {});
      } catch (err) {
        console.error('Failed to fetch dashboard quote:', err);
      }
    };

    fetchDashboardQuote();
  }, []);

  return (
    <footer className="main-footer">
      <Text className="container-widget mx-auto flex items-center justify-between">
        <Text className="footer-left-side flex items-center gap-4">
          <Utilities />
          <ThemeSwitcher />
        </Text>
        <Text className="footer-right-side">
          <Text className="showingAttentionWidget">
            {dashboardQuote?.quote_master_name ?? '—'}
          </Text>
        </Text>
      </Text>
    </footer>
  );
};

export default BottomBar;