'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {Badge} from '@astryxdesign/core/Badge';
import {Icon} from '@astryxdesign/core/Icon';
import {ICONS} from '@/shared/utils/icons';

const SALES_INSIGHTS = [
  {
    id: 'si1',
    title: 'Evening Peak Surge',
    description: 'Evening hours (17:30 - 19:30) generated 38% of total daily revenue.',
    intent: 'positive',
    badge: 'Growth Opportunity',
  },
  {
    id: 'si2',
    title: 'Stock Reorder Warning',
    description: 'Artisanal Cold Brew Pack (18 left) is approaching stockout threshold.',
    intent: 'warning',
    badge: 'Action Needed',
  },
  {
    id: 'si3',
    title: 'Indiranagar Conversion Leader',
    description: 'Indiranagar delivered +18.4% MoM conversion growth after digital pick-up lanes.',
    intent: 'positive',
    badge: 'Best Performer',
  },
];

export function CommerceSalesInsights() {
  return (
    <div className="rounded-xl border border-border bg-card p-4 space-y-3 shadow-sm">
      <div className="flex items-center justify-between border-b border-border pb-3">
        <div>
          <Heading level={4} className="text-base font-bold text-white flex items-center gap-2">
            <Icon icon={ICONS.ai} size="sm" className="text-amber-400" />
            Sales Insights
          </Heading>
          <Text size="sm" color="secondary">
            Automated intelligence highlights & telemetry warnings
          </Text>
        </div>
      </div>

      <div className="space-y-3">
        {SALES_INSIGHTS.map((item) => (
          <div
            key={item.id}
            className={`p-3 rounded-lg border flex flex-col justify-between gap-1.5 ${
              item.intent === 'warning'
                ? 'border-amber-500/30 bg-amber-500/[0.03]'
                : 'border-emerald-500/30 bg-emerald-500/[0.03]'
            }`}
          >
            <div className="flex items-center justify-between">
              <span className="text-xs font-bold text-white">{item.title}</span>
              <Badge
                variant={item.intent === 'warning' ? 'warning' : 'success'}
                label={item.badge}
              />
            </div>
            <Text size="sm" color="secondary">
              {item.description}
            </Text>
          </div>
        ))}
      </div>
    </div>
  );
}
