'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {MetricCard} from '@/shared/components/patterns/MetricCard';
import {formatInrCompact} from '@/shared/utils/format';

export function CommerceRevenueSummary() {
  return (
    <div className="rounded-xl border border-border bg-card p-4 space-y-4 shadow-sm">
      <div className="border-b border-border pb-3">
        <Heading level={4} className="text-base font-bold text-white">
          Revenue Summary
        </Heading>
        <Text size="sm" color="secondary">
          Financial performance rollup for the selected period
        </Text>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <MetricCard
          label="Gross Sales"
          value={362000}
          format={formatInrCompact}
          deltaPct={12.8}
        />
        <MetricCard
          label="Discounts & Promos"
          value={22000}
          format={formatInrCompact}
          deltaPct={-4.1}
        />
        <MetricCard
          label="Refunds Processed"
          value={22000}
          format={formatInrCompact}
          deltaPct={-2.4}
          isRiseGood={false}
        />
        <MetricCard
          label="Net Realized Revenue"
          value={318000}
          format={formatInrCompact}
          deltaPct={13.9}
        />
      </div>
    </div>
  );
}
