import { mdiChartTimelineVariant, mdiTrendingUp, mdiEarth, mdiFinance } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';
import CardBox from '../components/CardBox';
import LayoutAuthenticated from '../layouts/Authenticated';
import SectionMain from '../components/SectionMain';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
import { getPageTitle } from '../config';

const GoldPrediction = () => {
  return (
    <>
      <Head>
        <title>{getPageTitle('Gold Market Pulse')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Gold Market Pulse" main />
        
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
          <CardBox className="lg:col-span-2">
            <div className="text-center py-12 text-slate-500 italic">Gold Spot Price Chart Placeholder</div>
          </CardBox>
          <CardBox>
            <h3 className="text-lg font-bold mb-4">Forecast Horizons</h3>
            <ul className="space-y-2">
              <li className="flex justify-between p-2 bg-slate-50 rounded"><span>Daily</span> <span className="text-amber-500 font-bold">Stable</span></li>
              <li className="flex justify-between p-2 bg-slate-50 rounded"><span>Weekly</span> <span className="text-amber-500 font-bold">Bullish</span></li>
              <li className="flex justify-between p-2 bg-slate-50 rounded"><span>Monthly</span> <span className="text-amber-500 font-bold">Neutral</span></li>
            </ul>
          </CardBox>
        </div>
      </SectionMain>
    </>
  );
};

GoldPrediction.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
};

export default GoldPrediction;
