import type { TileItem } from "../../api/types";
import { Phone, TrendingUp, Activity, BarChart2, ShoppingCart, ShoppingBag, Scale } from 'lucide-react';
import './reusable.css';
import '../../styles/styles.css';

export interface StatsTileProps {
  tile: TileItem;
  idx?: number;
}

export function StatsTile({ tile, idx = 0 }: StatsTileProps) {
  const displayLabel = (tile.key || `tile_${idx}`)
    .replace(/_/g, " ")
    .replace(/\b\w/g, (c) => c.toUpperCase());

  const lowerKey = String(tile.key).toLowerCase();

  // Try to pick a relevant icon
  let Icon = BarChart2;
  if (lowerKey.includes('call') || lowerKey.includes('total')) Icon = Phone;
  if (lowerKey.includes('productive')) Icon = TrendingUp;
  if (lowerKey.includes('order') || lowerKey.includes('cart')) Icon = ShoppingCart;
  if (lowerKey.includes('bag')) Icon = ShoppingBag;
  if (lowerKey.includes('kg') || lowerKey.includes('weight')) Icon = Scale;
  if (lowerKey.includes('active')) Icon = Activity;

  const isDanger = lowerKey.includes('no_order');

  return (
    <div className={`z-stats-tile z-stats-tile--secondary ${isDanger ? 'z-stats-tile--danger' : ''}`}>
      <div className="z-stats-header">
        <span className={`z-stats-label`}>{displayLabel}</span>
        <Icon size={16} className={`z-stats-icon ${isDanger ? 'z-stats-icon--danger' : ''}`} />
      </div>

      <p className={`z-stats-value nums ${isDanger ? 'z-stats-value--danger' : ''}`}>
        {(tile.value as React.ReactNode) ?? "-"}
      </p>
    </div>
  );
}