import React from 'react';
import { Employee, District } from '../../types';
import { User, Phone, MessageCircle, MapPin } from 'lucide-react';
import { MOCK_EMPLOYEES } from '../../constants';

export const StaffRegistry: React.FC<{ districts: District[] }> = ({ districts }) => {
    return (
        <div className="space-y-4 animate-fade-in">
            <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm mb-6">
                <h3 className="font-bold text-slate-700 text-sm mb-4">Штат сотрудников по участкам</h3>
                <div className="space-y-3">
                    {MOCK_EMPLOYEES.map(emp => {
                        const district = districts.find(d => d.id === emp.assignedDistrictId);
                        return (
                            <div key={emp.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-xl border border-slate-100">
                                <div className="flex items-center gap-3">
                                    <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-primary-600 font-black border border-slate-200">
                                        {emp.name.split(' ').map(n => n[0]).join('')}
                                    </div>
                                    <div>
                                        <p className="font-bold text-slate-800 text-sm">{emp.name}</p>
                                        <p className="text-[10px] text-slate-500 flex items-center gap-1">
                                            <MapPin className="w-3 h-3"/> {district?.name || 'Не привязан'} • {emp.position}
                                        </p>
                                    </div>
                                </div>
                                <div className="flex gap-1">
                                    <button className="p-2 text-emerald-600 hover:bg-emerald-50 rounded-lg"><Phone className="w-4 h-4"/></button>
                                    <button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg"><MessageCircle className="w-4 h-4"/></button>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};