'use client';

import {
  ArrowUpRight,
  ArrowDownRight,
  Globe,
  Smartphone,
  Monitor,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';

const platformStats = [
  {
    label: 'Mobile Users',
    value: 62,
    icon: Smartphone,
    color: 'text-blue-600',
  },
  {
    label: 'Desktop Users',
    value: 28,
    icon: Monitor,
    color: 'text-emerald-600',
  },
  {
    label: 'Web App Users',
    value: 10,
    icon: Globe,
    color: 'text-violet-600',
  },
];

const performanceMetrics = [
  { label: 'User Retention', value: 87, trend: '+4.2%', up: true },
  { label: 'Conversion Rate', value: 24, trend: '+1.8%', up: true },
  { label: 'Churn Rate', value: 3.2, trend: '-0.5%', up: false },
];

export function QuickStats() {
  return (
    <div className="space-y-4">
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base font-semibold">Platform Usage</CardTitle>
        </CardHeader>
        <CardContent className="pt-0 space-y-4">
          {platformStats.map((stat) => (
            <div key={stat.label} className="space-y-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <stat.icon className={`h-4 w-4 ${stat.color}`} />
                  <span className="text-sm">{stat.label}</span>
                </div>
                <span className="text-sm font-semibold">{stat.value}%</span>
              </div>
              <Progress value={stat.value} className="h-1.5" />
            </div>
          ))}
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base font-semibold">Key Metrics</CardTitle>
        </CardHeader>
        <CardContent className="pt-0 space-y-3">
          {performanceMetrics.map((metric) => (
            <div
              key={metric.label}
              className="flex items-center justify-between rounded-lg border p-3"
            >
              <div>
                <p className="text-sm font-medium">{metric.label}</p>
                <p className="text-lg font-bold">
                  {typeof metric.value === 'number' && metric.value < 10
                    ? `${metric.value}%`
                    : `${metric.value}%`}
                </p>
              </div>
              <div
                className={`flex items-center gap-0.5 text-xs font-medium ${metric.up ? 'text-emerald-500' : 'text-red-500'}`}
              >
                {metric.up ? (
                  <ArrowUpRight className="h-3.5 w-3.5" />
                ) : (
                  <ArrowDownRight className="h-3.5 w-3.5" />
                )}
                {metric.trend}
              </div>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}