// app/components/admin/CommonComponents/RoleCheckboxGroup.tsx
'use client';

interface Role {
  id: string;
  name: string;
  description?: string;
}

interface RoleCheckboxGroupProps {
  roles: Role[];
  selectedRoleIds: string[];
  onChange: (roleId: string) => void;
  emptyMessage?: string;
  className?: string;
}

export default function RoleCheckboxGroup({
  roles,
  selectedRoleIds,
  onChange,
  emptyMessage = 'No roles available',
  className = '',
}: RoleCheckboxGroupProps) {
  if (roles.length === 0) {
    return (
      <div className={`text-center py-8 text-var-text-muted ${className}`}>
        <svg className="w-12 h-12 mx-auto mb-3 text-var-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
        </svg>
        <p className="text-sm">{emptyMessage}</p>
      </div>
    );
  }

  return (
    <div className={`space-y-3 ${className}`}>
      {roles.map(role => (
        <label
          key={role.id}
          htmlFor={`role-${role.id}`}
          className="flex items-start gap-3 p-3 rounded-xl border border-var-border hover:bg-var-surface-hover cursor-pointer transition-colors duration-150"
        >
          <input
            type="checkbox"
            id={`role-${role.id}`}
            checked={selectedRoleIds.includes(role.id)}
            onChange={() => onChange(role.id)}
            className="mt-0.5 w-4 h-4 text-var-primary border-var-border rounded focus:ring-var-primary shrink-0"
          />
          <div className="min-w-0">
            <span className="block text-sm font-semibold text-var-text">{role.name}</span>
            {role.description && (
              <span className="block text-sm text-var-text-muted mt-0.5">{role.description}</span>
            )}
          </div>
        </label>
      ))}
    </div>
  );
}