'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {AreaChartView} from '@/shared/components/charts/AreaChartView';
import {useWorkspace} from '@/shared/providers/WorkspaceProvider';
import {getRevenueTrendData} from '../../services/commerceService';

export function RevenueChart() {
  const {storeId, range} = useWorkspace();
  const data = getRevenueTrendData(storeId, range);

  return (
    <div className="rounded-xl border border-border bg-card p-4 space-y-3 overflow-hidden shadow-sm">
      <div className="flex items-center justify-between">
        <div>
          <Heading level={4} className="text-base font-bold text-primary">
            Revenue Trend
          </Heading>
          <Text size="sm" color="secondary">
            Hourly revenue performance against targets
          </Text>
        </div>
        <span className="text-xs font-bold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-full border border-emerald-500/20">
          +14.2% Above Target
        </span>
      </div>

      <div className="h-64 w-full pt-2">
        <AreaChartView
          data={data}
          xKey="time"
          series={[
            {key: 'Revenue', label: 'Actual Revenue (₹)'},
            {key: 'Target', label: 'Baseline Target (₹)'},
          ]}
          height="100%"
        />
      </div>
    </div>
  );
}