import InlineAnalyticsTable from "@/components/ui/inline-analytics-table";
import { TrendingUp, TrendingDown } from "lucide-react";
 
const analyticsData = [
  { id: "1", region: "North America", sales: 1200, revenue: 25000, growth: 12 },
  { id: "2", region: "Europe", sales: 900, revenue: 18000, growth: -5 },
  // ... more data
];
 
const columns = [
  { key: "region", label: "Region", align: "text-left" },
  { key: "sales", label: "Sales", showProgress: true, progressValue: 70 },
  { key: "revenue", label: "Revenue", showProgress: true, progressValue: 60 },
  { key: "growth", label: "Growth", showProgress: true, progressValue: 50 },
  {
    key: "growth",
    label: "Trend",
    align: "text-right",
    render: (item) =>
      item.growth >= 0 ? (
        <TrendingUp className="h-4 w-4 text-green-500" />
      ) : (
        <TrendingDown className="h-4 w-4 text-red-500" />
      ),
  },
];
 
export default function MyAnalyticsTable() {
  return (
    <InlineAnalyticsTable
      data={analyticsData}
      columns={columns}
      defaultProgress={50}
    />
  );
}