'use client';
import { FC } from "react";
import { Briefcase } from "lucide-react";


interface Props {
    item: any;
    isSelected: boolean;
    onClickHandler: (item: any) => void;
}

const RenderOneClientSelection: FC<Props> = ({ item, isSelected, onClickHandler }) => {
    if (isSelected) {
        return (
            <div key={item.uu_id} onClick={() => { onClickHandler(item) }}
                className="w-full text-xs bg-white shadow rounded-lg overflow-hidden transition-all hover:shadow-md mb-2 cursor-pointer">
                <div className="bg-amber-300 p-2 hover:bg-amber-400 transition-all">
                    <div className="flex items-center">
                        <div className="mr-2 relative">
                            <div className="w-8 h-8 rounded-full bg-amber-400 flex items-center justify-center overflow-hidden border border-white">
                                {item.avatar ? (<img src={item.avatar} alt="Company" className="w-full h-full object-cover" />) :
                                    (<div className="text-white text-xs font-bold">{(item.public_name || "No Name").slice(0, 2)}</div>)}
                            </div>
                            <div className="absolute -bottom-0.5 -right-0.5 bg-white p-0.5 rounded-full border border-amber-400">
                                <Briefcase size={8} className="text-amber-600" />
                            </div>
                        </div>
                        <div className="overflow-hidden">
                            <h2 className="text-xs font-bold text-black truncate">{item.public_name} {item.company_type}</h2>
                            <p className="text-xs text-amber-800 truncate">{item.duty}</p>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    return (
        <div key={item.uu_id} className="w-full text-xs bg-white shadow rounded-lg overflow-hidden transition-all mb-2 cursor-pointer">
            <div className="bg-gray-100 p-2">
                <div className="flex items-center">
                    <div className="mr-2 relative">
                        <div className="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center overflow-hidden border border-white">
                            {item.avatar ? (<img src={item.avatar} alt="Company" className="w-full h-full object-cover" />) :
                                (<div className="text-white text-xs font-bold">{(item.duty || "No Duty").slice(0, 2)}</div>)}
                        </div>
                        <div className="absolute -bottom-0.5 -right-0.5 bg-white p-0.5 rounded-full border border-gray-300">
                            <Briefcase size={8} className="text-gray-600" />
                        </div>
                    </div>
                    <div className="overflow-hidden">
                        <h2 className="text-xs font-bold text-gray-700 truncate">{item.public_name} {item.company_type}</h2>
                        <p className="text-xs text-gray-600 truncate">{item.duty}</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default RenderOneClientSelection;