import React from 'react';
import { Users, Search, Filter } from 'lucide-react';
import { Debtor } from '../../types';

export const DebtorsList: React.FC<{ debtors: (Debtor & { address: string })[] }> = ({ debtors }) => {
    return (
        <div className="space-y-4 animate-fade-in">
            <div className="flex gap-4">
                <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                    <input type="text" placeholder="Поиск должника..." className="w-full pl-9 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm" />
                </div>
                <button className="p-2.5 bg-white border border-slate-200 rounded-xl text-slate-500 hover:bg-slate-50"><Filter className="w-5 h-5"/></button>
            </div>

            <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm space-y-3">
                <div className="flex justify-between items-center mb-2 px-1">
                    <h3 className="font-bold text-slate-700 text-sm">Реестр неплательщиков</h3>
                    <span className="text-[10px] font-black text-slate-400 uppercase">Всего: {debtors.length}</span>
                </div>
                {debtors.map((d, i) => (
                    <div key={i} className="flex items-center justify-between p-3 bg-slate-50 hover:bg-slate-100 transition-colors rounded-xl border border-slate-100">
                       <div className="flex items-center gap-3">
                           <div className={`p-2 rounded-lg ${d.months > 3 ? 'bg-red-100 text-red-600' : 'bg-amber-100 text-amber-600'}`}>
                               <Users className="w-4 h-4"/>
                           </div>
                           <div>
                              <p className="text-sm font-bold text-slate-700">{d.address}, кв. {d.apartment}</p>
                              <p className="text-xs text-slate-500">{d.months} мес. долга • {d.status === 'legal' ? 'В суде' : 'Уведомлен'}</p>
                           </div>
                       </div>
                       <div className="text-right">
                           <p className="text-sm font-black text-red-600">{d.amount.toLocaleString()} ₽</p>
                           <button className="text-[9px] font-black text-primary-600 uppercase hover:underline">Выписать претензию</button>
                       </div>
                    </div>
                ))}
            </div>
        </div>
    );
};