'use client';
import { useState } from 'react';

interface Person {
    id: number;
    firstName: string;
    middleName: string;
    surname: string;
    avatar: string;
}

const PersonSelections = () => {

    const [selectedId, setSelectedId] = useState<number | null>(null);

    const people: Person[] = [
        { id: 1, firstName: 'John', middleName: 'Michael', surname: 'Doe', avatar: 'https://placehold.co/100x100/4F46E5/FFFFFF?text=JD' },
        { id: 2, firstName: 'Jane', middleName: 'Elizabeth', surname: 'Smith', avatar: 'https://placehold.co/100x100/EC4899/FFFFFF?text=JS' },
        { id: 3, firstName: 'Robert', middleName: 'James', surname: 'Johnson', avatar: 'https://placehold.co/100x100/10B981/FFFFFF?text=RJ' },
        { id: 4, firstName: 'Emily', middleName: 'Rose', surname: 'Williams', avatar: 'https://placehold.co/100x100/F59E0B/FFFFFF?text=EW' },
        { id: 5, firstName: 'Michael', middleName: 'Thomas', surname: 'Brown', avatar: 'https://placehold.co/100x100/EF4444/FFFFFF?text=MB' },
        { id: 6, firstName: 'Sarah', middleName: 'Ann', surname: 'Davis', avatar: 'https://placehold.co/100x100/8B5CF6/FFFFFF?text=SD' },
        { id: 7, firstName: 'David', middleName: 'Charles', surname: 'Miller', avatar: 'https://placehold.co/100x100/06B6D4/FFFFFF?text=DM' },
        { id: 8, firstName: 'Lisa', middleName: 'Marie', surname: 'Wilson', avatar: 'https://placehold.co/100x100/84CC16/FFFFFF?text=LW' },
        { id: 9, firstName: 'James', middleName: 'Patrick', surname: 'Moore', avatar: 'https://placehold.co/100x100/F97316/FFFFFF?text=JM' },
        { id: 10, firstName: 'Jennifer', middleName: 'Lynn', surname: 'Taylor', avatar: 'https://placehold.co/100x100/6366F1/FFFFFF?text=JT' },
    ];

    const handleSelect = (id: number) => { console.log('Selected row ID:', id); setSelectedId(id) };

    return (
        <div className="fixed top-30 w-1/2 h-1/3 bg-white border border-gray-300 shadow-lg overflow-hidden ml-5">
            <div className="h-full overflow-y-auto">
                {people.map((person) => (
                    <div key={person.id} className={`flex items-center p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors ${selectedId === person.id ? 'bg-blue-50' : ''}`}>
                        <div className="w-1/3 flex items-center justify-center">
                            <img src={person.avatar} alt={`${person.firstName} ${person.surname}`} className="w-16 h-16 rounded-full object-cover border-2 border-gray-300" />
                        </div>

                        <div className="flex-1 flex flex-col justify-center space-y-1 ml-4">
                            <div className="font-semibold text-gray-800">{person.firstName}</div>
                            <div className="text-sm text-gray-600">{person.middleName}</div>
                            <div className="text-sm text-gray-600">{person.surname}</div>
                        </div>

                        <div className="w-24 flex justify-end">
                            <button onClick={() => handleSelect(person.id)} className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-sm font-medium">Select</button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default PersonSelections;