'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {LineChartView} from '@/shared/components/charts/LineChartView';
import {FORECAST_TREND_DATA} from '../../services/commerceService';

export function ForecastChart() {
  return (
    <div className="rounded-xl border border-border bg-card p-5 space-y-3 shadow-sm overflow-hidden">
      <div className="flex items-center justify-between">
        <div>
          <Heading level={4} className="text-base font-bold text-white">
            Predictive Revenue & Demand Forecast
          </Heading>
          <Text size="sm" color="secondary">
            AI-driven 7-day revenue, demand and stock requirement projections
          </Text>
        </div>
        <span className="text-xs font-bold text-indigo-300 bg-indigo-500/10 px-3 py-1 rounded-full border border-indigo-500/20">
          96% Confidence Band
        </span>
      </div>

      <div className="h-64 w-full pt-2">
        <LineChartView
          data={FORECAST_TREND_DATA}
          xKey="date"
          series={[
            {key: 'actual', label: 'Actual Revenue (₹)'},
            {key: 'forecast', label: 'Forecasted Projection (₹)'},
            {key: 'upperBound', label: 'Upper Bound (₹)'},
          ]}
          height="100%"
        />
      </div>
    </div>
  );
}
