import React, { useState, useMemo } from 'react';
import { Trophy, Medal, Users, User, Star, Search, Clock, Zap, Target, Activity } from 'lucide-react';
// --- DATA CÁ NHÂN (35 Ranks) ---
const individualData = [
{ rank: 1, name: "Vương Ý Nguyễn Kim", stars: 2, km: 22.21 },
{ rank: 2, name: "Viết Đồng", stars: 2, km: 20.11 },
{ rank: 3, name: "Chi NTT", stars: 2, km: 19.17 },
{ rank: 4, name: "Pha Nguyễn", stars: 2, km: 13.83 },
{ rank: 5, name: "Pham Thanh Tin", stars: 2, km: 12.20 },
{ rank: 6, name: "Hùng Ngọc Lê", stars: 2, km: 12.20 },
{ rank: 7, name: "Giàu Võ", stars: 2, km: 11.18 },
{ rank: 8, name: "Lê Phước Vinh", stars: 2, km: 10.71 },
{ rank: 9, name: "Trương Lộc", stars: 2, km: 10.57 },
{ rank: 10, name: "Khang Trần", stars: 2, km: 9.88 },
{ rank: 11, name: "Dien Vothanh", stars: 2, km: 9.85 },
{ rank: 12, name: "Phúc Nguyễn", stars: 2, km: 9.82 },
{ rank: 13, name: "quốc việt lưu", stars: 2, km: 9.13 },
{ rank: 14, name: "Tiên Nguyễn", stars: 2, km: 8.80 },
{ rank: 15, name: "Vũ Nguyễn Hoàng", stars: 2, km: 8.29 },
{ rank: 16, name: "Trúc Trần Lâm", stars: 2, km: 8.18 },
{ rank: 17, name: "Trung Bảo", stars: 2, km: 8.11 },
{ rank: 18, name: "Nguyễn Hữu Tâm", stars: 2, km: 8.10 },
{ rank: 19, name: "Sanyo Le", stars: 2, km: 8.09 },
{ rank: 20, name: "Kim Khánh Nguyễn", stars: 2, km: 7.97 },
{ rank: 21, name: "Thế Vinh Trần", stars: 2, km: 7.82 },
{ rank: 22, name: "Thanh Cao", stars: 2, km: 7.70 },
{ rank: 23, name: "Xuân Khoa Nguyễn Phạm", stars: 1, km: 5.82 },
{ rank: 24, name: "Công Hậu", stars: 1, km: 5.22 },
{ rank: 25, name: "Nhi Tuyet", stars: 1, km: 4.50 },
{ rank: 26, name: "Nghi Gia", stars: 1, km: 4.45 },
{ rank: 27, name: "Ngọc Thắm", stars: 1, km: 4.38 },
{ rank: 28, name: "Toan Vo", stars: 1, km: 4.33 },
{ rank: 29, name: "Thảo Nguyễn", stars: 1, km: 4.16 },
{ rank: 30, name: "Tuoi Mai Van", stars: 1, km: 4.13 },
{ rank: 31, name: "Tan Phat", stars: 1, km: 4.11 },
{ rank: 32, name: "Thom Nguyen", stars: 1, km: 3.93 },
{ rank: 33, name: "Linh Dương Cẩm", stars: 1, km: 3.92 },
{ rank: 34, name: "Nguyên Nguyễn thị trung", stars: 1, km: 3.88 },
{ rank: 35, name: "Đỗ Như Quỳnh", stars: 1, km: 3.87 },
];
// --- DATA ĐỒNG ĐỘI (8 Ranks) ---
const teamData = [
{ rank: 1, name: "KTTC-XNK", members: 10, totalStars: 13, avgStars: 1.300, totalKm: 72.44, avgKm: 7.244 },
{ rank: 2, name: "Kho Giao Nhận 2", members: 8, totalStars: 10, avgStars: 1.250, totalKm: 42.34, avgKm: 5.292 },
{ rank: 3, name: "Kinh doanh CPN-CE", members: 9, totalStars: 8, avgStars: 0.889, totalKm: 50.48, avgKm: 5.609 },
{ rank: 4, name: "Kinh doanh System 1", members: 8, totalStars: 7, avgStars: 0.875, totalKm: 41.94, avgKm: 5.243 },
{ rank: 5, name: "Kinh doanh System 2", members: 7, totalStars: 6, avgStars: 0.857, totalKm: 29.86, avgKm: 4.266 },
{ rank: 6, name: "Kho Giao Nhận 1", members: 9, totalStars: 6, avgStars: 0.667, totalKm: 28.75, avgKm: 3.194 },
{ rank: 7, name: "Nese", members: 9, totalStars: 4, avgStars: 0.444, totalKm: 15.20, avgKm: 1.689 },
{ rank: 8, name: "Liên Quân", members: 10, totalStars: 3, avgStars: 0.300, totalKm: 16.13, avgKm: 1.613 },
];
const getMedalIcon = (rank) => {
if (rank === 1) return
;
if (rank === 2) return ;
if (rank === 3) return ;
return {rank};
};
const getRowStyle = (rank) => {
if (rank === 1) return "bg-gradient-to-r from-lime-50 to-green-50 border-lime-300 shadow-lime-500/20 shadow-lg scale-[1.01] z-10";
if (rank === 2) return "bg-gradient-to-r from-slate-50 to-teal-50 border-teal-200 shadow-md scale-[1.005] z-10";
if (rank === 3) return "bg-gradient-to-r from-orange-50 to-amber-50 border-amber-200 shadow-md scale-[1.005] z-10";
return "bg-white border-slate-100 hover:border-emerald-200 hover:shadow-md transition-all duration-200";
};
export default function App() {
const [activeTab, setActiveTab] = useState('team');
const [searchTerm, setSearchTerm] = useState('');
const filteredIndividuals = useMemo(() =>
individualData.filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase())),
[searchTerm]);
const filteredTeams = useMemo(() =>
teamData.filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase())),
[searchTerm]);
return (
{/* Import Font Google Flex */}