"use client";

import { DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';

interface CategoryItem {
  name: string;
  count: number;
  percentage: number;
}

interface DeviceAnalyticsProps {
  data: DeviceAnalyticsType;
}

export default function DeviceAnalytics({ data }: DeviceAnalyticsProps) {
  const renderCategory = (items: CategoryItem[], title: string) => (
    <div className="bg-white rounded-lg shadow p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
      <div className="space-y-4">
        {items.map((item, index) => (
          <div key={index}>
            <div className="flex justify-between text-sm text-gray-600 mb-1">
              <span>{item.name}</span>
              <span>{item.percentage.toFixed(1)}% ({item.count})</span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div 
                className="bg-blue-600 h-2 rounded-full" 
                style={{ width: `${item.percentage}%` }}
              ></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  // Prepare device types data
  const deviceItems = data.deviceTypes.map(item => ({
    name: item.type || 'Unknown',
    count: item.count,
    percentage: item.percentage
  }));

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {renderCategory(deviceItems, 'Device Types')}
      {renderCategory(data.browsers, 'Browsers')}
      {renderCategory(data.operatingSystems, 'Operating Systems')}
    </div>
  );
}