/**
 * 멤버 선택 컴포넌트
 * - 일정 폼에서 참여 멤버 선택용
 */
import { memo } from 'react';
import { Users, Check } from 'lucide-react';

/**
 * @param {Object} props
 * @param {Array} props.members - 전체 멤버 목록
 * @param {Array} props.selectedIds - 선택된 멤버 ID 배열
 * @param {Function} props.onToggle - 멤버 토글 핸들러
 * @param {Function} props.onToggleAll - 전체 선택/해제 핸들러
 */
const MemberSelector = memo(function MemberSelector({
  members,
  selectedIds,
  onToggle,
  onToggleAll,
}) {
  const isAllSelected = selectedIds.length === members.length;

  return (
    <div className="bg-white rounded-2xl shadow-sm p-8">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-2">
          <Users size={20} className="text-primary" />
          <h2 className="text-lg font-bold text-gray-900">참여 멤버</h2>
        </div>
        <button
          type="button"
          onClick={onToggleAll}
          className="text-sm text-primary hover:underline"
        >
          {isAllSelected ? '전체 해제' : '전체 선택'}
        </button>
      </div>

      <div className="grid grid-cols-5 gap-4">
        {members.map((member) => {
          const isSelected = selectedIds.includes(member.id);
          return (
            <button
              key={member.id}
              type="button"
              onClick={() => onToggle(member.id)}
              className={`relative rounded-xl overflow-hidden transition-all ${
                isSelected
                  ? 'ring-2 ring-primary ring-offset-2'
                  : 'hover:opacity-80'
              }`}
            >
              <div className="aspect-[3/4] bg-gray-100">
                {member.image_url ? (
                  <img
                    src={member.image_url}
                    alt={member.name}
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center bg-gray-200">
                    <Users size={24} className="text-gray-400" />
                  </div>
                )}
              </div>
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                <p className="text-white text-sm font-medium">{member.name}</p>
              </div>
              {isSelected && (
                <div className="absolute top-2 right-2 w-6 h-6 bg-primary rounded-full flex items-center justify-center">
                  <Check size={14} className="text-white" />
                </div>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
});

export default MemberSelector;
