import React from 'react';
import { Card } from '@/components/ui/card';
import { Globe } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { TrafficSource } from './types';

interface AnalyticsViewOriginsProps {
  sources: TrafficSource[];
}

export function AnalyticsViewOrigins({ sources }: AnalyticsViewOriginsProps) {
  return (
    <Card variant="glass" className="p-6 bg-black/40 border-white/5">
      <h3 className="font-bold text-white mb-6 text-sm uppercase tracking-widest flex items-center gap-2">
        <Globe className="w-4 h-4 text-magenta-500" /> Origins
      </h3>
      <div className="space-y-5">
        {sources.map((src) => (
          <div key={src.label} className="group cursor-default">
            <div className="flex justify-between text-xs mb-2">
              <span className="text-muted-foreground group-hover:text-white transition-colors uppercase font-mono">
                {src.label}
              </span>
              <span className="text-white font-bold">{src.val}%</span>
            </div>
            <div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
              <div
                className={cn('h-full transition-all duration-1000', src.color.replace(/^bg-kodo-/, 'bg-'))}
                style={{ width: `${src.val}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}